Диаграмма. js сбои и возвраты к предыдущему набору данных при наведении - PullRequest
Новая
       18

Диаграмма. js сбои и возвраты к предыдущему набору данных при наведении

0 голосов
/ 10 января 2020

Я использую Диаграмму. 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
            }
        }
    }
});

        }
    });
}

Как видите, я уничтожил диаграмму и обновил ее свойство (я думаю) - что дает?

...