2

我正在使用 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
            }
        }
    }
});

        }
    });
}

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

4

1 回答 1

0

我们应该使用

if(myChart)
  myChart.destroy()

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

ChartJs 折线图在悬停时重新绘制故障

于 2021-10-19T15:51:41.733 回答