javascript - 当单击chart.js中的图例项时，我的栏被隐藏但栏的值不隐藏

Question

这是我的html代码：

<div class="chart col-md-12">
 <canvas id="bar-chart-grouped2" style="min-height: 250px; height: 250px; max-height: 400px; max-width: 100%;margin-top:1%;"></canvas>
</div>

和chartjs代码

new Chart(document.getElementById("bar-chart-grouped"), {
               type: 'bar',
               data: {
                   labels:  <%=Newtonsoft.Json.JsonConvert.SerializeObject(Date_Solar_Index)%>,
                datasets: [
                    {
                        label: "Total_Recived",
                        backgroundColor: "#17a2b8",
                        fillColor: "rgba(151,187,205,0.5)",
                        borderColor: '#e2e2e2',
                        borderWidth: '2',
                        data:<%=Newtonsoft.Json.JsonConvert.SerializeObject(POID_MMS_Index)%>,
                    }, {
                        label: "valideted",
                        backgroundColor: "#28a745",
                        fillColor: "rgba(151,187,205,0.5)",
                        borderColor: '#e2e2e2',
                        borderWidth: '2',
                        data:  <%=Newtonsoft.Json.JsonConvert.SerializeObject(COW_POID_MMS_Index)%>,
                    }, {
                        label: "Total_rejected",
                        backgroundColor: "#ff0000",
                        fillColor: "rgba(151,187,205,0.5)",
                        borderColor: '#e2e2e2',
                        borderWidth: '2',
                        data: <%=Newtonsoft.Json.JsonConvert.SerializeObject(MNP_POID_MMS_Index)%>,
                    }, {
                        label: "Total_Back log",
                        backgroundColor: "#ffc107",
                        fillColor: "rgba(151,187,205,0.5)",
                        borderColor: '#e2e2e2',
                        borderWidth: '2',
                        data:  <%=Newtonsoft.Json.JsonConvert.SerializeObject(Supervisions_Index)%>,
                    }, {
                        label: "Total_Back log",
                        backgroundColor: "#B60A3B",
                        fillColor: "rgba(151,187,205,0.5)",
                        borderColor: '#e2e2e2',
                        borderWidth: '2',
                        data:  <%=Newtonsoft.Json.JsonConvert.SerializeObject(INDEXED_Index)%>,
                    }, {
                        label: "Total_Back log",
                        backgroundColor: "#72098E",
                        fillColor: "rgba(151,187,205,0.5)",
                        borderColor: '#e2e2e2',
                        borderWidth: '2',
                        data:  <%=Newtonsoft.Json.JsonConvert.SerializeObject(Reject_Index)%>,
                    }
                ]
            },
            options: {
                maintainAspectRatio: false,
                responsive: true,
                title: {
                    display: true,
                    text: ''
                },
                legend: { display: true, position: "bottom", onClick: null },
                hover: {
                    animationDuration: 0
                },


                animation: {
                    onComplete: function () {
                        var chartInstance = this.chart;
                        var ctx = chartInstance.ctx;
                        ctx.response = true;
                        ctx.textAlign = "center";
                        ctx.font = "bold  Arial";
                        //ctx.fillStyle = "black";
                        Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            Chart.helpers.each(meta.data.forEach(function (bar, index) {
                                ctx.save();
                                // Translate 0,0 to the point you want the text
                                ctx.translate(bar._model.x, bar._model.y - 20);

                                // Rotate context by -90 degrees
                                ctx.rotate(-0.5 * Math.PI);

                                // Draw text
                                ctx.fillText(dataset.data[index], 0, 0);
                                ctx.restore();
                            }), this)
                        }), this);
                    }
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            color: "rgba(0, 0, 0, 0)",

                        },
                        id: 'B',
                        type: 'linear',
                        display: false,
                        position: 'left',

                    }, {
                        gridLines: {
                            color: "rgba(0, 0, 0, 0)",
                        },
                        id: 'A',
                        type: 'linear',
                        position: 'right',
                        display: false,
                        ticks: {

                            max: 101,
                            min: 0
                        }
                    }]
                }
            }
        });

在此处输入图像描述

标签： javascriptjquerycanvaschart.js

Answer 1

您已经覆盖了图例的默认 onClick 方法，legend: { display: true, position: "bottom", onClick: null }删除并重onClick: null试。它应该工作

编辑：亲爱的，在您的 afterDraw 中，您从不检查数据集是否隐藏，您总是绘制文本。由于数据仍在数据对象中，它只会绘制它