chart.js 2.3动态加载饼图数据

Question

我有一个饼图,希望能够在MTD和YTD数据之间切换.在页面加载时加载正常的图表.我很难通过AJAX将数据从MTD更改为YTD.

我已经看了很多关于这个的帖子,但我发现的一切都是旧版本的chart.js 1.0.1.

我想使用最新版本的chart.js 2.3.这是代码任何帮助将不胜感激.

HTML:

<div class="chart-responsive">
   <canvas id="myPieChart" />
</div>

JAVASCRIPT:

var pieconfig = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [<cfoutput>#valueList(myPieData.totalAmt)#</cfoutput>], // the returned data looks like this (1254.52,223.50,etc.)
      backgroundColor: [
        "#F7464A",
        "#46BFBD",
        "#FDB45C",
        "#949FB1",
        "#4D5360",
        "#60A2C9",
        "#00A65A",
        "#D2D6DE",
        "#4D5360",
        "#00C0EF"
      ],
      label: 'Dataset 1'
    }],
    labels: [
      <cfoutput>#ListQualify(valueList(myPieData.busUnit), "'",  ",")#</cfoutput> // the returned label looks like this ('Joe','Jim',etc.)
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'right',
    },
    title: {
      display: false,
      text: 'Chart.js Doughnut Chart'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById("myPieChart").getContext("2d");    
  myDoughnut = new Chart(ctx, pieconfig);
};

上面的代码在页面加载时工作正常.下面是我更新饼图中数据的代码.

$.ajax({
  type: "POST",
  url: "/main/piechartdata/",
  data: {'workList':'sale','rtype':$rType},
  dataType: "json",
  success: function(rData) {
    console.log(rData.labels);
    locData = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: rData.datapoint // return data looks like this: 4469.37,2455153.58,672038.48,83.27,58821.22,36606.71
          backgroundColor: [
            "#F7464A",
            "#46BFBD",
            "#FDB45C",
            "#949FB1",
            "#4D5360",
            "#60A2C9",
            "#00A65A",
            "#D2D6DE",
            "#4D5360",
            "#00C0EF"
          backgroundColor: [
            "#F7464A",
            "#46BFBD",
            "#FDB45C",
            "#949FB1",
            "#4D5360",
            "#60A2C9",
            "#00A65A",
            "#D2D6DE",
            "#4D5360",
            "#00C0EF"
          ],
          label: 'Dataset 1'
        }],
        labels: rData.labels //return data looks like this: 'CBS','CFM','CIA','Millennium','OTHER','Thrifty'
      },
      options: {
        responsive: true,
        legend: {
          position: 'right',
        },
        title: {
          display: false,
          text: 'Chart.js Doughnut Chart'
        },
        animation: {
          animateScale: true,
          animateRotate: true
        }
      }
    };  

    var ctx = document.getElementById("myPieChart").getContext("2d");    
    myDoughnut = new Chart(ctx, locData);

  }
});

这是我最近的失败尝试.提前感谢您的帮助!

Answer 1

基诺的答案是准确的,我会在这里稍微扩展一下:

你已经有了一个名为myDoughnut的图表对象,就像任何javascript对象一样,你可以访问它的任何成员,类似于传统oop语言中的类.

在您的情况下,创建locData后,您应该能够使用:

myDoughnut.data = locData;
myDoughnut.update();

您只需用新数据替换现有图表中的数据,而不是创建新图表.您必须调用update()才能进行更改.

希望这能解决您的问题.