我们可以在单击饼图图例标签时删除条形图线吗？

Question

单击饼图图例后，我试图删除/显示特定的“horizo​​ntalBar”线：

在图例回调函数中，我可以通过以下代码轻松获取索引值和文本值

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
                }]
            },

    }
});

如果选中/取消选中饼图图例，是否可以隐藏/显示特定的水平线。

请帮帮我。

Answer 1

在chart2的图例上使用下面的代码，即水平条（图例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();
                  }


              }

             }