高位图堆积柱形图更改图例ItemClick函数

Question

在legendItemClick上，如何防止图例项值从合计中减去，而将该值添加到另一个图例项中。

例如，我希望"其他水果"系列包含所有关闭的水果系列（与"其他素食"系列相同）。

这是Fiddle

$(function () {
 $('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Then', 'Now']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
     series: {
            events: {
                legendItemClick: function () {
                 //if fruit/veg is clicked then add value to other fruit/veg and keep the total unchanged
                  // return false;
                }
            }
        },
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter:function() {
                  return this.series.name+' '+this.point.y;
                },
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                style: {
                    textShadow: '0 0 3px black'
                }
            }
        }
    },
    series: [{
        name: 'Other Fruit',
        data: [8, 13]
    },{
        name: 'Other Veg',
        data: [16, 10]
    },{
        name: 'Tomatoes',
        data: [3, 7]
    },{
        name: 'Cucumbers',
        data: [5, 4]
    },{
        name: 'Apples',
        data: [5, 3]
    }, {
        name: 'Bananas',
        data: [3, 6]
    }, {
        name: 'Oranges',
        data: [3, 4]
    }]
});

})；

Answer 1

需要做的事情

• 系列应该被归类为水果和蔬菜，这样我们就知道从哪个其他系列（"其他水果"或"其他蔬菜"）中增加/减少值
• 单击图例项目时，检查它是水果还是蔬菜，并将值添加到其他项目中
• 再次单击时，从其他值中减去这些值

• 我们不应该隐藏其他系列。

  series: [{
    name: 'Other Fruit',
    data: [{y:8}, {y:13}],
  },{
    name: 'Other Veg',
    data: [{y:16}, {y:10}]
  },{
    name: 'Tomatoes',
    data: [{y:3}, {y:7}],
    fruit: false
  },{
    name: 'Cucumbers',
    data: [{y:5}, {y:4}],
    fruit: false
  },{
    name: 'Apples',
    data: [{y:5}, {y:3}],
    fruit: true
  },{
    name: 'Bananas',
    data: [{y:3}, {y:6}],
    fruit: true
  },{
    name: 'Oranges',
    data: [{y:3}, {y:4}],
    fruit: true
  }]
  

  在除"其他水果"one_answers"其他蔬菜"外的所有系列中添加了一个属性"水果"。

  legendItemClick: function () {
      var isFruit = this.options.fruit;
      if(isFruit == undefined){ //property undefined for "Other fruit" and "Other Veg"
        return false; //returning false prevents hiding the series
      }
      var chart = this.chart;
      var othersSeries;
      if(isFruit){
        othersSeries = chart.series[0]; //if it's a fruit, get "Other Fruit" series
      }
      else{
        othersSeries = chart.series[1]; //else get "Other Veg" series
      }
      updateOthersData(this, othersSeries);
  }
  function updateOthersData(currentSeries, othersSeries){
      var othersData = othersSeries.options.data;
      if(currentSeries.visible){ //add values only when the series is already visible and is to be hidden
          othersData[0].y += currentSeries.options.data[0].y;
          othersData[1].y += currentSeries.options.data[1].y;
      }
      else{ //subtract values only when data is already hidden and is to be shown
          othersData[0].y -= currentSeries.options.data[0].y;
          othersData[1].y -= currentSeries.options.data[1].y;
      }
   othersSeries.update({data:othersData}); //update the series
  }   
  

这是小提琴。