Highcharts堆積柱形圖更改legendItemClick函數

在legendItemClick上，如何防止從總數中減去圖例項目值，而是將該值添加到另一個圖例項目。Highcharts堆積柱形圖更改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] 
    }] 
});

}）;

來源

2016-03-27 agri

的事情，我們需要做的

系列應該被歸類爲水果和蔬菜，這樣我們就知道別人系列（「其他水果」或「其他素食」），以增加從/減值。
當點擊圖例項目時，檢查它是水果還是蔬菜，並將值添加到其他人。
再次單擊時，將其他值減去。

我們不應該能夠隱藏其他系列。

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。

來源

2016-03-28 00:39:07

Highcharts堆積柱形圖更改legendItemClick函數

回答

相關問題