无法根据 json 响应绘制圆环图

Question

我正在尝试使用 chartjs 绘制圆环图我从我的本地主机得到了正确的 json 响应我的代码是：

    
    
        $(document).on('click', '#plotGraph', function(event) {
                            event.preventDefault();
                            alert("hello");
                            $.getJSON("PlotExpenseGraph", function(data1) {
                                alert("hiiiii");
                                console.log(data1);
                                console.log(data1.expenseList[0].param);
                                var pieData;
                                $.each(data1.expenseList, function(position, expenseList) {
                                    console.log(expenseList.param);
                                    console.log(expenseList.totalCount);
                                    console.log(expenseList.totalValue);
                                    pieData = {
                                        value: expenseList.totalValue,
                                        color: "#F7464A",
                                        highlight: "#FF5A5E",
                                        label: expenseList.param
                                    }
                                });
                                var ctx = $("#myChart").get(0).getContext("2d");
                                var myNewChart = new Chart(ctx);
                                new Chart(ctx).Doughnut(pieData);
                            });
                        });

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id="plotGraph">Plot graph</a>
      <canvas id="myChart" width="500" height="300"></canvas>

我的主机数据是

参数："Advertising"

总数：2

总价值：754

2

754

我的代码没有绘制任何图形，也没有在控制台上给出任何错误。我应该做些什么扫描才能正确地在上面的代码上工作。

Answer 1

ChartJS 需要一个对象数组作为 Doughnut() 方法的参数。另一方面，您只需创建对象，从而覆盖最后一个对象。

相反，您应该将 pieData 声明为数组并在 each() 回调中添加条目，如下所示：

$(document).on('click', '#plotGraph', function (event) {
  event.preventDefault();

  $.getJSON("PlotExpenseGraph", function (data1) {

    // prepare parameter to ChartJS
    var pieData = [];
    $.each(data1.expenseList, function (position, expenseList) {

      // add respective entry
      pieData.push({
        value : expenseList.totalValue,
        color : "#F7464A",
        highlight : "#FF5A5E",
        label : expenseList.param
      });

    });

    // paint
    var ctx = $("#myChart").get(0).getContext("2d");
    var myNewChart = new Chart(ctx);
    new Chart(ctx).Doughnut(pieData);
  });
});

无法根据 json 响应绘制圆环图

Not able to draw Doughnut Chart from json response

javascript

jquery

chart.js