Question

我想使用Chart.js绘制饼图。我想动态创建图表，因为用户首先需要进行一些选择，以过滤图表中使用的数据。

我在页面上有一个画布：

.as-console-wrapper { max-height: 100% !important; top: 0; }

我有代码进行ajax调用

<canvas id="PieChart"width="54" height="27" style="display: block; width: 54px; height: 27px;"></canvas>

ajax调用将返回json，如下所示：

$('.rappofiler').change(function() {
         console.log('render report');
         $.ajax({
             url: "../controllers/reportController.php",
             type: 'POST',
             dataType: 'html',
             data: {
                 'action': 'openIssues',
                 'filter1' : $('#filter1').val(),
                 'filter2' : $('#filter2').val()
             }
         }).done(function (chartdata) {

             var parsedChartdata =  $.parseJSON(chartdata);

            // now draw the chart

     })

返回值的数量会有所不同。我现在不知何故必须将ajax调用的结果与代码一起绘制饼图，如下所示：

[{"description":"team1","number":11},{"description":"team2","number":408},{"description":"team3","number":12}]

最好的方法是什么？请记住，我无法在ajax调用后更改数据的返回方式。

Answer 1

我记得很难找到一个很好的方法来做到这一点，我最终这样做，然后只是分配＆＃39;标签＆＃39;和＆＃39;数据＆＃39;数组到图表的数据变量中的相应属性。

var output = [{'description': 'team1','number': 11},{'description':'team2','number': 408}, {'description': 'team3','number': 12}];

var labels = [];
var data = [];

output.forEach(function(entry) {
  labels.push(entry.description);
  data.push(entry.number);
});

https://jsfiddle.net/bn32gh94/2/

让我知道小提琴是否有问题，因为它实际上是我公开的第一个。：）

使用通过ajax调用检索的数据绘制Chart.js

1 个答案: