图表JS当悬停显示旧值

Question

当下拉选择改变这表明先前选定的值。我试了很多办法想摧毁图表功能，但他们没有工作或我不能工作的任何一个可以帮我约的解决方案。

我已经看到了关于这个问题有许多答案，但他们没有工作..

我有共同的下方，以便寻求帮助我的代码

 let asyaIlceRuhsat = document.getElementById('asyaIlceRuhsat').getContext('2d');

$(document).ready(function () {
    $('#mySelectAsya').select2({
        width: '100%'
    }).val() == -1 ? $('#asyaIlceRuhsat').after('<div class="asyaSecimi"><p class="text-center text-uppercase font-weight-bolder">Lütfen ilçe seçiniz!</p></div>') : null;
});

//Asya Yakası
$('#mySelectAsya').on('select2:select', function (e) {
    var selectedId = $('#mySelectAsya').val()
    var selectedText = $("#mySelectAsya :selected").text()
    var canvas = document.getElementById('asyaIlceRuhsat')
    if (selectedId === -1) {
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        $(".asyaSecimi").css("display", "block");
        $(canvas).addClass("hidden");
    }
    else {
        $(canvas).removeClass("hidden");
        $(".asyaSecimi").css("display", "none");
    }

    fetch(`http://myurl/api/Web/Test/GetValue?query=${queryId}`) 
        .then(function (response) {
            return response.json();
            // console.log(response)
        })
        .then(function (ids) {
            // console.info(`ids:`, ids)
            new Chart(asyaIlceRuhsat, {
                type: 'bar',
                data: {
                    labels: ids.map(function (id) {
                        return id.TUR;
                    }),
                    datasets: [
                        {
                            label: "ARIZA",
                            backgroundColor: "#e65c00",
                            data: ids.map(function (id) {
                                return id.ARIZASAYISI;
                            }),
                        }, {
                            label: "ARIZA ONAY",
                            backgroundColor: "#66ff66",
                            data: ids.map(function (id) {
                                return id.ARIZAONAYSAYISI;
                            }),
                        }, {
                            label: "NORMAL",
                            backgroundColor: "#66ccff",
                            data: ids.map(function (id) {
                                return id.NORAMLSAYISI;
                            }),
                        }, {
                            label: "BAŞVURU",
                            backgroundColor: "#0099ff",
                            data: ids.map(function (id) {
                                return id.BASVURUSAYISI;
                            }),
                        },
                    ]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Normal Ruhsat Durum',
                        fontSize: 18
                    },
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            fontColor: '#000',
                            usePointStyle: false
                        }
                    },
                    layout: {
                        padding: {
                            left: 0,
                            right: 0,
                            bottom: 0,
                            top: 0
                        }
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Asya Geneli Normal Ruhsat Durumları',
                                fontColor: '#000000',
                                fontSize: 12
                            }
                        }]
                    }
                }
            });
        });
})

Answer 1

这是一个很常见的问题，同时更新了新的图表相同的画布。在您的下拉菜单更改事件尝试添加如下代码，这将破坏所有的图表前一个实例。

Chart.helpers.each(Chart.instances, function (instance) {
        instance.destroy();
    });