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

ErikL 发表于 Dev

埃里克

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

达克斯

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

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/

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

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

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