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

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

我页面上的画布：

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

和我的代码做Ajax调用

$('.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调用会得到JSON回来，看起来像这样：

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

返回值的数量会有所不同。我现在无论如何都必须结果结合Ajax调用，用代码来绘制饼图是这样的：

var data = { 
    labels: [ 
     "Red", 
     "Blue", 
     "Yellow" 
    ], 
    datasets: [ 
     { 
      data: [300, 50, 100], 
      backgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ], 
      hoverBackgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ] 
     }] 
};

什么是做到这一点的最好方法是什么？请记住，我不能在ajax调用之后更改数据的返回方式。

来源

2017-03-16 ErikL

我记得有很多麻烦找到一个很好的方法来做到这一点，我结束了这样做，然后只是分配'标签'和'数据'数组到数据变量的相应属性为图表。

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/

让我知道如果有什么问题的小提琴，因为它是从字面上我第一个公开。 :)

来源

2017-03-16 14:04:33 Dax

小提琴的作品，谢谢！这种方式是我考虑这样做的一种方式，但是将字符串连接起来似乎很难看，而且我虽然在这里的java guru可能会知道一个“更漂亮”的方式来做到这一点。 – ErikL

想要听到更好的解决方案，确实如此！ – Dax

实际上，你并没有连接字符串，而是使用push将它们添加到数组中，这已经比我想象的要好很多 – ErikL

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

回答

相关问题