gpt4 book ai didi

javascript - canvasjs,使用可变数据/图例创建图表

转载 作者:行者123 更新时间:2023-12-03 12:10:15 25 4
gpt4 key购买 nike

我正在尝试使用预先确定的数据(也称为来自数据库)在canvasjs中创建饼图。在 Canvasjs 方面,有一个有用的教程可以将多个数据放入图表中(使用弱类型数组),但我不知道如何为图例执行此操作。我已经尝试过一些方法,但似乎还不太有效。

我的代码将发布在下面,如果有人知道我如何创建图例或替代它的东西,我将非常感激!

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {

var dps = [{y: 10}, {y: 13}, {y: 18}, {y: 20}];
var bmp = [{x:"Wii U"}, { x: "3DS"}, { x: "PS3"}, { x: "Xbox One"}];
//dataPoints.

var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Test title"
},
data: [{
type: "pie",
dataPoints : dps,
indexLabels : bmp
}],
legendText: bmp
});

chart.render();
var xVal = dps.length + 1;
var yVal = 15;
var updateInterval = 1000;

var updateChart = function () {


yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({x: xVal,y: yVal});

xVal++;
if (dps.length > 10 )
{
dps.shift();
}

chart.render();

// update chart after specified time.

};
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>

最佳答案

你做得很好,但是你将标签放置到了错误的数组

var dps = [
{y: 10, legendText:"Wii U", label: "Wii U 10%"},
{y: 13, legendText:"3DS", label: "3DS 13%"},
{y: 18, legendText:"PS3", label: "PS3 18%"},
{y: 20, legendText:"Xbox One", label: "Xbox One 20%"}
];

DEMO

您可以找到更多示例here

关于javascript - canvasjs,使用可变数据/图例创建图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24997184/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com