所以我有一个带有饼图和 5 个切片的 javascript。我想将此图表应用到故事情节幻灯片中。在这个 Storyline 项目中，我有 5 个具有特定值的变量。当用户回答一些问题时，这些值会发生变化。在项目结束时，这些值将通过此饼图可视化。
饼图工作得很好，但现在我必须将这些切片与故事情节变量连接起来。我怎样才能做到这一点？
在这里您可以看到饼图是如何构建的。
// This gives the pie slices a name. //
var myPersoonlijkheid = {
"Categorie1": 10,
"Categorie2": 44,
"Categorie3": 32,
"Categorie4": 12,
"Categorie5": 8
我可以直接说var=Categorie1 数字在哪里吗？或者比这更复杂？我在互联网上搜索了一些答案，但我找不到任何东西，显然否则我现在不会问这个。哈哈!
所以..有人可以帮助我吗？ :D 我会感谢它!谢谢!
最佳答案
我成功了:D
我做了什么:
我制作了一个 Storyline 项目，其中有 5 个 slider 。这些 slider 都有自己的变量(var1、var2、var3、var4 和 var5)。我创建了一张空白幻灯片，用于放置此饼图。
然后我制作了一个index.html文件。该文件包含
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript"src="pie-chart.js"></script>
</body>
我将此文件保存到服务器上的 map 中。
之后我将这个 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();
}
之后我发布了故事情节文件。现在它工作得很好!
感谢穆斯塔法的帮助。我很欣赏它:D
关于javascript - 将 javascript 变量设置为等于 Storyline 变量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45691118/