Question

我添加了动画以在折线图js中的值点上显示标签值数据。但是，当我单击图例以隐藏线时，标签不会消失。老实说，我真的没有任何解决办法。

the chart after hide some line with legend

var ctxTotal = $("#grap_trajec_divisi");
                var chartOptions = {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                            position: 'bottom',
                        },
                    tooltips: {
                        enabled: true,
                        mode: 'single',
                        callbacks: {
                            label: function (tooltipItems, data) {
                                var dataM = tooltipItems.yLabel;
                                formatM(dataM);
                                var multistringText = [data_M];
                                multistringText.push(tooltipItems.yLabel);
                                multistringText.push(data.datasets[tooltipItems.datasetIndex].label);
                                return multistringText;
                            }
                        }
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            gridLines: {
                                color: "#f3f3f3",
                                drawTicks: true,
                            },
                            scaleLabel: {
                                display: false,
                                labelString: 'Month'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            gridLines: {
                                color: "#f3f3f3",
                                drawTicks: true,
                            },
                            scaleLabel: {
                                display: false,
                                labelString: 'Value'
                            },
                            ticks: {
                                callback: function (value, index, values) {
                                    var dataYaxis = value;
                                    formatM(dataYaxis);
                                    return data_M;
                                }
                            },
                        }]
                    },
                    animation: {
                        duration: 1,
                        onComplete: function () {
                            var chartInstance = this.chart,
                                ctx = chartInstance.ctx;
                            ctx.font = '.7rem "Calibri",sans-serif';
                            ctx.fillStyle = '#555';
                            ctx.textAlign = "center";

                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var data = dataset.data[index];
                                formatM(data);
                                ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
                            });
                        });
                    }
                }
                //title: {
                //    display: true,
                //    text: 'Chart.js Line Chart - proyeksi'
                //}
            };
            var chartData = {
                labels: arr,
                datasets: [{
                    label: "RKAP",
                    data: value_LT,
                    fill: false,
                    borderColor: "rgb(89,159,240)",
                    pointBorderColor: "rgb(89,159,240)",
                    pointBackgroundColor: "#FFFFFF",
                    pointBorderWidth: 1,
                    pointHoverBorderWidth: 1,
                    pointRadius: 3,
                    spanGaps: true,
                }, {
                    label: "Target",
                    data: value_LT2,
                    fill: false,
                    borderColor: "rgb(186,179,61)",
                    pointBorderColor: "rgb(186,179,61)",
                    pointBackgroundColor: "#FFFFFF",
                    pointBorderWidth: 1,
                    pointHoverBorderWidth: 1,
                    pointRadius: 3,
                    spanGaps: true,
                }, {
                    label: "Actual",
                    data: value_LO,
                    fill: false,
                    borderColor: "rgb(78,199,138)",
                    pointBorderColor: "rgb(78,199,138)",
                    pointBackgroundColor: "#FFFFFF",
                    pointBorderWidth: 1,
                    pointHoverBorderWidth: 1,
                    pointRadius: 3,
                    spanGaps: true,
                }, {
                    label: "Proyeksi",
                    data: value_LP,
                    fill: false,
                    borderColor: "rgb(241,151,89)",
                    pointBorderColor: "rgb(241,151,89)",
                    pointBackgroundColor: "#FFFFFF",
                    pointBorderWidth: 1,
                    pointHoverBorderWidth: 1,
                    pointRadius: 3,
                    spanGaps: true,
                }],
            };
            var config = {
                type: 'line',
                options: chartOptions,
                data: chartData
            };
            if (window.chartTrajecDivisi != undefined) {
                window.chartTrajecDivisi.destroy();
            }
            window.chartTrajecDivisi = new Chart(ctxTotal, config);

我想通过单击标签隐藏行时隐藏标签，因此标签和行一起隐藏/显示。

Answer 1

我找到了答案。只需删除动画，并使用插件datalabel图表js。

图例单击图表js时如何显示/隐藏动画

1 个答案: