0

所以我有一个带有饼图和 5 个切片的 javascript。我想将此图表实现为故事情节幻灯片。在这个 Storyline 项目中，我有 5 个具有特定值的变量。当用户回答一些问题时，这些值会发生变化。在项目结束时，这些值将使用此饼图进行可视化。

饼图完美运行，但现在我必须将这些切片与 Storyline 变量连接起来。我怎样才能做到这一点？

在这里，您可以看到饼图是如何构建的。

// This gives the pie slices a name. //
var myPersoonlijkheid = {
    "Categorie1": 10,
    "Categorie2": 44,
    "Categorie3": 32,
    "Categorie4": 12,
    "Categorie5": 8

我能说var=Categorie1一下数字在哪里吗？还是比这更复杂？我已经在互联网上搜索了一些答案，但我找不到任何东西，显然否则我现在不会问这个。哈哈！

所以..有人可以帮助我吗？:DI 会appriciate ！谢谢！

4

2 回答 2

3

我设法使它工作：D

我做了什么：

我制作了一个故事线项目，其中有 5 个滑块。这些滑块都有自己的变量（var1、var2、var3、var4 和 var5）。我创建了一张空白幻灯片，该饼图将在其中放置。

然后我制作了一个 index.html 文件。该文件包含

<body> 
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript"src="pie-chart.js"></script>
</body>

我将此文件保存到服务器上的地图中。

之后我把这个Javascript放在一起：

// the JS code will first get a reference to the canvas and then set its width and height. To draw on the canvas, we only need a reference to its 2D context which contains all the drawing methods. //
        /*global quotes:true, global $*/

    window.onload = function() {
        var player = window.parent.GetPlayer(); //this piece was missing.//

        var myCanvas = document.getElementById("myCanvas");
        myCanvas.width = 300;
        myCanvas.height = 300;
        var ctx = myCanvas.getContext("2d");
        // Define what the function. //
        function drawLine(ctx, startX, startY, endX, endY) {
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
        }
        // This function draws an arc between the lines. //
        function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle) {
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
            ctx.stroke();
        }
        // This function draws a coloured shape between the lines. //
        function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
            ctx.closePath();
            ctx.fill();
            /* drawLine(_ctx,100,100,200,200);
            drawArc(_ctx, 150,150,150, 0, Math.PI/3);
            drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000'); */
        }
        /* This retrieves the value of the Storyline variable 
           (the one between the quote symbols). */
                var var1 = player.GetVar("var1");
                var var2 = player.GetVar("var2");
                var var3 = player.GetVar("var3");
                var var4 = player.GetVar("var4");
                var var5 = player.GetVar("var5");

        // This gives the slices the value from above. //
            var myPersoonlijkheid = {
                "Categorie1": var1,
                "Categorie2": var2,
                "Categorie3": var3,
                "Categorie4": var4,
                "Categorie5": var5
        };
        var Piechart = function(options) {
            this.options = options;
            this.canvas = options.canvas;
            this.ctx = this.canvas.getContext("2d");
            this.colors = options.colors;
            this.draw = function() {
                var total_value = 0;
                var color_index = 0;
                for (var categ in this.options.data) {
                    var val = this.options.data[categ];
                    total_value += val;
                }
                var start_angle = 0;
                for (categ in this.options.data) {
                    val = this.options.data[categ];
                    var slice_angle = 2 * Math.PI * val / total_value;
                    drawPieSlice(this.ctx, this.canvas.width / 2, this.canvas.height / 2, Math.min(this.canvas.width / 2, this.canvas.height / 2), start_angle, start_angle + slice_angle, this.colors[color_index % this.colors.length]);
                    start_angle += slice_angle;
                    color_index++;
                }
            }
        }
        var myPiechart = new Piechart({
            canvas: myCanvas,
            data: myPersoonlijkheid,
            colors: ["#f2f2f2", "#b3dcff", "#1b96ff", "#004682", "#002341"]
        });
        myPiechart.draw();
        }

之后，我发布了 Storyline 文件。现在它完美地工作了！

感谢穆斯塔法的帮助。我很欣赏它：D

于 2017-08-21T14:22:32.667 回答
0

要在 Javascript 代码中获取故事情节变量，您可以执行以下操作：

function displayChart(){
    var thePlayer = GetPlayer();
    var var1 = thePlayer.GetVar("variable1");
    var var2 = thePlayer.GetVar("variable2");
    ...

    var myPersoonlijkheid = {
        "Categorie1": var1,
        "Categorie2": var2,
        "Categorie3": var3,
        "Categorie4": var4,
        "Categorie5": var5
    }
   pieChart(myPersoonlijkheid);
}

您可以使用 javascript 触发器来运行上面的函数。

于 2017-08-15T12:18:00.140 回答