文章/答案/技术大牛

发布

社区首页 >问答首页 >创建一个包含可变数据/图例的图表

问创建一个包含可变数据/图例的图表
EN

Stack Overflow用户

提问于 2014-07-28 14:11:19

回答 1查看 1.7K关注 0票数 0

我试图使用预先确定的数据(来自DB的AKA)在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>

javascript

jquery

graph

canvasjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-28 15:06:54

你做得很好，但是你把标签放错了数组。

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%"}
];

演示

您可以找到更多的示例这里

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24997184

复制

相似问题

问创建一个包含可变数据/图例的图表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个包含可变数据/图例的图表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个包含可变数据/图例的图表
EN