在点击饼形图的图例后，我试图删除/显示特定的“ horizontalBar”行：
在图例回调函数上，我可以通过以下代码轻松获取索引值和文本值
legend: {
display : true,
onClick: function(e, legendItem) {
var index = legendItem.index;
var chart = this.chart;
console.log(legendItem);
var i, ilen, meta;
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
// toggle visibility of index if exists
if (meta.data[index]) {
meta.data[index].hidden = !meta.data[index].hidden;
}
}
chart.update();
}
}
下面的代码用于生成饼图。
var ctx = document.getElementById('myChart');
var mychart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(155, 10, 132)',
'rgb(55, 20, 132)',
'rgb(85, 30, 132)',
'rgb(69, 20, 132)',
'rgb(20, 100, 132)',
],
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {
legend: {
display : true,
onClick: function(e, legendItem) {
var index = legendItem.index;
var chart = this.chart;
console.log(legendItem);
var i, ilen, meta;
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
// toggle visibility of index if exists
if (meta.data[index]) {
meta.data[index].hidden = !meta.data[index].hidden;
}
}
chart.update();
}
},
}
});
，下面的图表用于生成如下的条形图：
var ctx2 = document.getElementById('myChart2');
var myChart2 = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: '# of Votes',
data: [0, 10, 5, 2, 20, 30, 45],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display : true,
},
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
},
}
});
如果选中/取消选中饼图图例，是否可以隐藏/显示特定的水平线。
请在这里帮助我。
答案 0 :(得分：0)
在chart2中的图例上使用以下代码，该图为水平条（legend onClick事件）
legend: {
display : true,
onClick: function(e, legendItem) {
var index = legendItem.index;
var chart = this.chart;
console.log(legendItem);
var i, ilen, meta;
for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
meta = chart.getDatasetMeta(i);
// toggle visibility of index if exists
if (meta.data[index]) {
meta.data[index].hidden = !meta.data[index].hidden;
}
}
chart.update();
//if legend is hidden hide the below data from the list also remove the data from the list items
var __text = legendItem.text;
var __split_text = __text.split(" ").join('_').toLowerCase();
var checked_unchecked_data_value = myChart2.data['datasets'][0]['data'][legendItem.index];
var checked_unchecked_date_label_value = myChart2.data['labels'][legendItem.index];
/*
my chart index and label value getting for the delete purpose
becz on delete index value is changed so doing the same
*/
//var __delete_checked_unchecked_data_value = myChart.data['datasets'][0]['data'][legendItem.index];
//var __delete_checked_unchecked_date_label_value = myChart.data['labels'][legendItem.index];
if(!legendItem.hidden){
$(".serial_"+legendItem.index).hide();
$(".section_"+__split_text).hide();
addSerialNumberAPCSUSelect();
/*var index_dataset = myChart.data.datasets[0].data.indexOf(__delete_checked_unchecked_data_value);
if(index_dataset > -1){
myChart.data.datasets[0].data.splice(index_dataset,1);
}
var index_label = myChart.data.labels.indexOf(__delete_checked_unchecked_date_label_value);
console.log("index data at " + index_dataset + " label index at " + index_label);
if(index_label > -1){
myChart.data.labels.splice(index_label,1);
}*/
myChart.data.datasets[0].data[legendItem.index] = 0;
myChart.data.labels[legendItem.index] = '';
myChart.update();
//console.log(" bar chart index changed at after remove" );
//console.log(myChart.data);
}else{
$(".serial_"+legendItem.index).show();
$(".section_"+__split_text).show();
addSerialNumberAPCSUSelect();
//myLineChart.data.datasets[0].data[2] = 50;
/*var data = [];
label = legendItem.text;
data[checked_unchecked_data_value] = checked_unchecked_date_label_value;
addData(myChart, label, data);*/
//myChart.data.datasets[0].data[checked_unchecked_data_value] = checked_unchecked_date_label_value;
myChart.data.datasets[0].data[legendItem.index] = checked_unchecked_data_value;
myChart.data.labels[legendItem.index] = checked_unchecked_date_label_value;
myChart.update();
}
}
}