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（）才能进行更改。

希望这可以解决您的问题。

Answer 2

您有两个选择：

如果您只是在更改数据后更新数据通话更新（）：

myDoughnut.data.datasets[0].data[11] = 300;
  myDoughnut.update();

Update Chart

否则，首先使用destroy（）破坏您的图表并重新初始化您的图表：

myDoughnut.destroy();
myDoughnut = new Chart(ctx, locData);

Destroy Chart

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

2 个答案: