Question

选择“下拉列表”时，更改ıt显示先前选择的值。我尝试了很多方法，例如破坏图表功能，但没有一个起作用，或者我无法工作任何人都可以帮助我解决该问题。

关于这个问题，我看到了很多答案，但是都没有用..

我在下面共享了我的代码，以便寻求帮助

 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();
    });

悬停显示旧值时的图表js

1 个答案: