Question

我正在尝试使用chartjs绘制圆环图我从我的localhost获得了正确的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>

我的控制台数据是

param：“广告”

totalCount：2

totalValue：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响应中绘制Donut Chart

1 个答案: