Question

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

饼图工作完美，但现在我必须将这些切片与Storyline变量连接起来。我怎么能这样做？

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

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

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

那么......有人可以帮助我吗？：D我会赞美它！谢谢！

Answer 1

我设法让它发挥作用：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文件。现在它完美无缺！

感谢Mustafa的帮助。我赞成它：D

Answer 2

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

$errors_log

您可以使用javascript触发器来运行上述功能。

设置javascript变量等于Storyline变量？

2 个答案: