Chart.js 出现故障并在悬停时恢复到以前的数据集答案

【问题标题】：Chart.js glitches and reverts to previous dataset on hoverChart.js 出现故障并在悬停时恢复到以前的数据集
【发布时间】：2020-01-09 22:59:28
【问题描述】：

我正在使用 Chart.js (https://www.chartjs.org) 制作图表，但是在将图表数据切换到新数据集并使用光标滚动图表后，它会出现故障并恢复到旧数据集。这是我的代码：

<li class="breadcrumb-item"><select id="cityselect" onchange="changeCity();">
<option value="la">Los Angeles</option>
<option value="oc">Orange County</option>
<option value="sf">San Francisco</option>
</select></li>

<div class="bottommargin divcenter" style="max-width: 90%; min-height: 350px;">
<canvas id="resChart"></canvas>
</div>

function changeCity(){
    var ctx = document.getElementById('resChart');
    var resChart = new Chart(ctx);
    resChart.destroy();

    getResChartData();
}

function getResChartData() {
    var city = document.getElementById("cityselect").value;
$.ajax({
        type: 'GET',
        url: 'getreschart.php',
        dataType: 'json',
        data: {  city:city, },
        success: function(response) {
          //console.log (response);

          function collate(d) {
            return d.reduce(function(prev, cur, index) {
                var ret = {};
                for (var prop in cur) {
                    if (index === 0) {
                        ret[prop] = [];
                    } else {
                        ret[prop] = prev[prop];
                    }
                    ret[prop].push(cur[prop]);
                }
                return ret;
            }, {});
        }

          var reduced = collate(response);
var ctx = document.getElementById('resChart').getContext('2d');
var resChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: reduced.mmyy,
        datasets: [{
            label: 'Fulfilled Reservations',
            data: reduced.fulfilledreservations,
            backgroundColor: window.chartColors.orange,
            borderColor: window.chartColors.orange,
            fill: false
        },
        {
            label: 'Unfulfilled Reservations',
            data: reduced.unfulfilledreservations,
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
            fill: false
        },
        {
            label: 'All Reservations',
            data: reduced.allreservations,
            backgroundColor: window.chartColors.gray,
            borderColor: window.chartColors.gray,
            fill: false
        }]
    },
    options: {
        responsive: true,
        elements: {
            line: {
                tension: 0 // disables bezier curves
            }
        }
    }
});

        }
    });
}

如您所见，我已销毁图表并更新了它的属性（我认为）- 给出了什么？

【问题讨论】：

在悬停时恢复到以前的数据集 显然是一个更新问题。你创建一个新的var resChart 并销毁它。旧的不受影响。解决此问题的一种简单方法是将resChart 设为全局。
你能给我举个例子吗？
我没有一个完美的例子来做到这一点，但我有一个使用 async/await 的 JSBin（它可能并不完美，因为这是我第一次尝试 async/await，但我认为你会明白使用接收到的数据的意义）：jsbin.com/sowegisule/1/edit?js,output 这是一个关于更新图表的简单演示，但没有调用：jsbin.com/semizutico/1/edit?js,output

标签： javascript chart.js chart.js2

【解决方案1】：

我们应该使用

if(myChart)
  myChart.destroy()

在分配新数据集之前的方法，如以下链接所述

ChartJs line chart repaint glitch while hovering over

【讨论】：