Question

我使用chart.js在圆环图上遇到了一些麻烦。问题是当我更新图表时，当我将鼠标悬停在图表上时，有时会显示旧图表。这是我调用图表绘制函数的地方：

<select class="form-control" id="ddlCategory" onchange="plotChart()">     
</select>

function plotChart(){
// removed code to retrieve data from firebase
var chart;
var ctx = document.getElementById('donutChart').getContext("2d");
var data = {};
var opt = {
          type: "doughnut",
          data: data,
          options: options
        };

        if (chart) {
            chart.destroy();
            chart.clear();
        }else{
            chart = new Chart(ctx,opt);
        }
for(var i = 0; i < labelData.length; i++){
        chart.config.data.labels.push(labelData[i]);
    }
chart.update();
}

我在更新之前试图破坏之前的图表，但无济于事。有什么想法吗？

Answer 1

你确实需要销毁上一张图表。也许尝试以下内容：

function plotChart() {
   // removed code to retrieve data from firebase

   var ctx = document.getElementById('donutChart').getContext("2d");
   var data = {};
   var opt = {
      type: "doughnut",
      data: data,
      options: options
   };

   if (chart) chart.chart.destroy();
   window.chart = new Chart(ctx, opt);

   for (var i = 0; i < labelData.length; i++) {
      chart.config.data.labels.push(labelData[i]);
   }
   chart.update();
}

Answer 2

每次调用函数时，图表变量似乎都是重新声明，因此在调用plotchart（）时永远不会存在。建议您先声明变量并将其置于正确的范围内（如果存在）。这似乎是你问题的核心

图表js显示悬停时的旧图表数据

2 个答案: