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

【问题标题】：Draw a Chart.js with data retrieved through ajax call使用通过 ajax 调用检索的数据绘制 Chart.js
【发布时间】：2017-03-16 13:28:08
【问题描述】：

我想用 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 调用后返回数据的方式。

【问题讨论】：

标签： javascript jquery ajax chart.js

【解决方案1】：

我记得在找到一个好方法时遇到了很多麻烦，我最终这样做了，然后只是将“标签”和“数据”数组分配给图表数据变量中的相应属性.

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/

如果小提琴有问题，请告诉我，因为它实际上是我公开的第一个。 :)

【讨论】：

小提琴有效，谢谢！这种方式是我正在考虑的一种方式，但是仅仅连接字符串似乎很丑陋，而且我虽然这里的 java 大师可能知道一种“更漂亮”的方式来做到这一点。
确实也希望听到更好的解决方案！
实际上，您不是在连接字符串，而是使用 push 将它们添加到数组中，这已经比我想象的要好很多
天哪，不，串联字符串确实很难看。但是话又说回来，我不知道您如何将它们传递给图表变量，因为 afaik 它只需要一个数组。