Highcharts Yığın Sütun grafiği değiştir legendItemClick işlevi

Question

Açıklamada, efsane öğesi değerinin toplamından çıkarılmasını nasıl önlerim ve bunun yerine değeri başka bir lejant öğesine eklerim.

E.g. 'Diğer Meyve' serilerinin tüm kapalı meyve serilerini ('Diğer sebzeler' serisiyle aynı) içermesini isterim. Burada

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] 
    }] 
}); 

olup}); Biz diğerleri serisi ("Diğer Meyve" veya "Diğer sebze") elde/çıkarma değer katmak için hangi biliyoruz ki

Answer 1

şeyler biz, meyve ve sebze gibi kategorize edilmelidir

• Serisi yapmak gerekir.
• Açıklama öğesine tıklandığında meyve veya sebze olup olmadığını kontrol edin ve değeri başkalarına ekleyin.
• Yeniden tıkladığınızda, diğerlerinden değerleri çıkarın.

• Diğer dizileri gizleyememeliyiz.

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

  "Diğer Meyve" ve "Diğer Sebzeler" dışındaki tüm serilere "meyve" özelliği eklendi. İşte

  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 olduğunu.