Question

当我更新现有的甜甜圈图表值时，它看起来有效（使用新值更新）。

但是当更新的圆环图上鼠标悬停时，它会显示Old Donut。当鼠标离开时，它显示更新的甜甜圈图表。

默认值

var pieData = [{
  value: 300,
  color: "#F7464A",
  highlight: "#FF5A5E",
  label: "Red"
}, {
  value: 50,
  color: "#46BFBD",
  highlight: "#5AD3D1",
  label: "Green"
}];

var pieOptions = {
  segmentShowStroke: true,
  segmentStrokeColor: "#fff",
  segmentStrokeWidth: 2,
  percentageInnerCutout: 50,
  animationSteps: 100,
  animationEasing: "easeOutBounce",
  animateRotate: true,
  animateScale: false,
  responsive: true,
  maintainAspectRatio: true,

}

更新了以下内容：

$('#updateButton').click(function() {

  pieData = [{
    value: 100,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
  }, {
    value: 150,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
  }];
  pieChart.Pie(pieData, pieOptions);
});

我的代码段HERE

我失踪的地方不明白。

Answer 1

这是因为，您在更新按钮单击时创建了一个新的图表实例，而旧的实例永远不会被删除。

因此，要使圆环图在鼠标悬停时正确显示更新值，您需要在单击更新按钮时销毁之前的图表实例。

要做到这一点......

首先，将图表实例存储到变量中，如下所示：

var pieChart_instance = pieChart.Doughnut(pieData, pieOptions);

然后，在创建新实例之前，在更新按钮上单击，销毁它：

$('#updateButton').click(function() {
    pieChart_instance.destroy();
    ...

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

var pieData = [{
   value: 300,
   color: "#F7464A",
   highlight: "#FF5A5E",
   label: "Red"
}, {
   value: 50,
   color: "#46BFBD",
   highlight: "#5AD3D1",
   label: "Green"
}];

var pieOptions = {
   segmentShowStroke: true,
   segmentStrokeColor: "#fff",
   segmentStrokeWidth: 2,
   percentageInnerCutout: 50,
   animationSteps: 100,
   animationEasing: "easeOutBounce",
   animateRotate: true,
   animateScale: false,
   responsive: true,
   maintainAspectRatio: true,

};


var pie_ctx = document.getElementById("pie-chart-area").getContext("2d");

var pieChart = new Chart(pie_ctx);

var pieChart_instance = pieChart.Doughnut(pieData, pieOptions);


$('#updateButton').click(function() {
	pieChart_instance.destroy(); //destroy previous instance of chart
   
   pieData = [{
      value: 100,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
   }, {
      value: 150,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
   }];
   
   pieChart_instance = pieChart.Doughnut(pieData, pieOptions);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<input type="button" id="updateButton" value="Update Values" />
<div style="width: 300px;">
   <canvas id="pie-chart-area" width="300" height="300" />
</div>
<div id="legend"></div>

ChartJS在更新值后鼠标悬停在Donut上时显示旧值

1 个答案: