Javascript 单击chart.js中的图例项时，我的条形图处于隐藏状态，但条形图的值未隐藏
这是我的html代码：Javascript 单击chart.js中的图例项时，我的条形图处于隐藏状态，但条形图的值未隐藏,javascript,jquery,canvas,chart.js,Javascript,Jquery,Canvas,Chart.js,这是我的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代
<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>
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
}
}]
}
}
});
新图表（document.getElementById（“条形图分组”）{
类型：'bar'，
数据：{
标签：，
数据集：[
{
标签：“收到的总金额”，
背景色：“17a2b8”，
填充颜色：“rgba（151187205,0.5）”，
边框颜色：'#e2e2'，
边框宽度：“2”，
数据：，
}, {
标签：“有效”，
背景颜色：“28a745”，
填充颜色：“rgba（151187205,0.5）”，
边框颜色：'#e2e2'，
边框宽度：“2”，
数据：，
}, {
标签：“全部拒绝”，
背景颜色：“ff0000”，
填充颜色：“rgba（151187205,0.5）”，
边框颜色：'#e2e2'，
边框宽度：“2”，
数据：，
}, {
标签：“总回日志”，
背景颜色：“ffc107”，
填充颜色：“rgba（151187205,0.5）”，
边框颜色：'#e2e2'，
边框宽度：“2”，
数据：，
}, {
标签：“总回日志”，
背景色：“B60A3B”，
填充颜色：“rgba（151187205,0.5）”，
边框颜色：'#e2e2'，
边框宽度：“2”，
数据：，
}, {
标签：“总回日志”，
背景色：“72098E”，
填充颜色：“rgba（151187205,0.5）”，
边框颜色：'#e2e2'，
边框宽度：“2”，
数据：，
}
]
},
选项：{
MaintaintAspectRatio:false，
回答：是的，
标题：{
显示：对，
文本：“”
},
图例：{display:true，位置：“bottom”，onClick:null}，
悬停：{
动画持续时间：0
},
动画：{
onComplete:函数（）{
var chartInstance=this.chart；
var ctx=chartInstance.ctx；
ctx.response=true；
ctx.textAlign=“中心”；
ctx.font=“bold Arial”；
//ctx.fillStyle=“黑色”；
Chart.helpers.each（this.data.datasets.forEach）（函数（dataset，i）{
var meta=chartInstance.controller.getDatasetMeta（i）；
每个（meta.data.forEach）函数（条形图，索引）{
ctx.save（）；
//将0,0转换为所需的文本点
翻译（bar.\u model.x，bar.\u model.y-20）；
//将上下文旋转-90度
ctx.旋转（-0.5*Math.PI）；
//绘制文本
ctx.fillText（dataset.data[index]，0,0）；
ctx.restore（）；
})，本页）
})，这个）；
}
},
比例：{
xAxes：[{
网格线：{
显示：假
}
}],
雅克斯：[{
网格线：{
颜色：“rgba（0,0,0,0）”，
},
id:'B'，
类型：'线性'，
显示：假，
位置：'左'，
}, {
网格线：{
颜色：“rgba（0,0,0,0）”，
},
id:'A'，
类型：'线性'，
位置：'右'，
显示：假，
滴答声：{
最高：101，
最低：0
}
}]
}
}
});
您已经覆盖了图例的默认onClick方法
图例：{display:true，position:bottom，onClick:null}onClick:null编辑：亲爱的，在你的后期绘制中，你从不检查数据集是否隐藏，你总是绘制文本。由于数据仍在数据对象中，它将只绘制它明确您的问题，添加您的ResultDear ali的屏幕截图感谢您的帮助屏幕截图此处输入dear I禁用此属性，因为当onClick为true时显示不正确T您可以在我随附的图片中显示结果。