ChartJS 如何显示/隐藏动画当图例点击图表js

cfh9epnr  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(293)

我添加了动画来显示折线图js中的值点上的标签值数据。但是当我单击图例来隐藏一条线时,标签不会消失。老实说,我真的没有任何线索来修复它。
the chart now
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);

我想通过点击标签来隐藏线时隐藏标签,这样标签和线一起隐藏/显示。

4si2a6ki

4si2a6ki1#

我觉得这个有用。

this.data.datasets.forEach(function (dataset, i) {         

                var meta = chartInstance.controller.getDatasetMeta(i);

                if (!meta.hidden) {

                    meta.data.forEach(function (bar, index) {

                         var data = dataset.data[index];
                         formatM(data);
                         ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
                    });
                }

            });
7vhp5slm

7vhp5slm2#

我找到了这个问题的答案。只是删除动画,并使用插件数据标签图表js。

相关问题