Question

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

E.g。我希望'其他水果'系列包含所有关闭的水果系列（与'其他蔬菜'系列相同）。

以下是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
}]

为除“其他水果”和“其他蔬菜”之外的所有系列添加了属性“水果”。

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
}

这是fiddle。

Highcharts Stacked Column图表更改legendItemClick功能

1 个答案: