动态确定要显示的饼图数量,并使用CanvasJS在单个页面上显示每个饼图

用户名

我希望构建数量不确定的饼图,并能够将它们彼此并排显示在页面上。生成的饼图的数量将取决于JSON对象中元素的数量。我在下面提供了一个有关数据外观的示例:

[
  {
    "id" : "123",
    "data" : [20, 40, 10, 20, 10]
  },
  {
    "id" : "456",
    "data" : [10, 20, 20, 30, 20]    
  },
  {
    "id" : "789",
    "data" : [25, 35, 5, 10, 25]
  }
]

我想为每个具有“ id”和“ data”属性的元素制作一个饼图。“数据”将用作饼图中“ id”(包含在元素中)的dataPoints。我该如何实现?

维斯瓦斯

从JSON解析数据并将其传递到chart-options即可。查找下面的代码:

var dps = [];
var dataSeries = [];
var charts = [];

$.when( $.getJSON("https://api.myjson.com/bins/us9mk", function(result) {  
  for(var i = 0; i < result.length; i++) {
    dps = [];
    for(var j = 0; j < result[i].data.length; j++) {
      dps.push({y: result[i].data[j]});
    }
    dataSeries.push({id: result[i].id, type: "pie", dataPoints: dps})
  }
})).then(function( data, textStatus, jqXHR ) {
  for(var i = 0; i < dataSeries.length; i++) {
    $("#chartsContainer").append("<div id='" + dataSeries[i].id + "' style='width: 100%; height: 200px;'></div>");
    charts[i] = new CanvasJS.Chart(dataSeries[i].id, {
      title: {
        text: dataSeries[i].id
      },
      data: [dataSeries[i]]
    });    
    charts[i].render();
  }
});
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="chartsContainer"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在不同页面上加载单个饼图

来自分类Dev

如何使用highcharts显示多个饼图

来自分类Dev

简易饼图不显示

来自分类Dev

高图饼图应按升序显示

来自分类Dev

高图饼图应按升序显示

来自分类Dev

单击CanvasJS饼图后重定向到特定页面

来自分类Dev

动态更新饼图

来自分类Dev

使用饼图显示结果时出现问题

来自分类Dev

使用MPAndroidChart饼图显示不同的数据集

来自分类Dev

Highcharts饼图在空时显示轮廓

来自分类Dev

highcharts-ng未显示饼图

来自分类Dev

饼图的标签文本未显示

来自分类Dev

密谋:饼图仅显示图例

来自分类Dev

Sencha Touch 2饼图未显示

来自分类Dev

饼图未显示预期输出

来自分类Dev

功能不显示饼图

来自分类Dev

在画面上绘制饼图

来自分类Dev

在画面上绘制饼图

来自分类Dev

角度图-饼图,在每个数据切片内显示标签

来自分类Dev

饼图:如何使用AChartEngine Android库在某些饼图上显示文本?

来自分类Dev

饼图:如何使用AChartEngine Android库在某些饼图上显示文本?

来自分类Dev

使用SVG的饼图

来自分类Dev

饼图的内部显示标签,饼图外部显示百分比

来自分类Dev

根据网格数据显示剑道图(饼图)

来自分类Dev

突出显示饼图(高图)中的活动数据标签

来自分类Dev

CanvasJS React-如何在处理单击事件的同时使饼图切片突出显示(又名爆炸)

来自分类Dev

我的饼状图无法正常显示或显示任何内容

来自分类Dev

饼形图在应显示数据时显示“其他”

来自分类Dev

如何在饼图中显示图例从图表到饼图钻取高图