Kann Highcharts gestapelte Prozent Säulendiagramm weniger als 100% sein

Question

Ich habe eine Anforderung, ein gestapeltes Prozent Säulendiagramm in Highcharts eine Aufschlüsselung einer bestimmten Prozentzahl anstelle einer Aufschlüsselung von 100% haben. Wenn die Zahl beispielsweise 60% beträgt, sollte die Grafik eine Aufschlüsselung von 60% (20% Blau, 10% Grün, 30% Gelb) anstatt 100% aufweisen. Mein Verständnis von Prozent-Charts ist, dass sie immer 100% sind, aber fragst du dich, ob diese Art von Manipulation irgendwie mit Highcharts möglich ist? Vielen Dank.

Answer 1

Wie was @Alden Be sagte, verwenden Sie gestapelte Spalte mit% Etiketten. Hier ist die JSFiddle example.

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Stacked column chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Percentage' 
      }, 
      labels: { 
       formatter: function() { 
        return this.value + '%'; 
       } 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       }, 
       formatter: function() { 
        return this.total + '%'; 
       } 
      } 
     }, 
     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: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        format:'{y}%', 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        style: { 
         textShadow: '0 0 3px black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [5, 3, 4, 7, 2] 
     }, { 
      name: 'Jane', 
      data: [2, 2, 3, 2, 1] 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 5] 
     }] 
    }); 
}); 

Answer 2

Verwenden Sie die gestapelte Spalte anstelle der gestapelten prozentualen Spalte, fügen Sie dann einfach einen Prozentsatz an Ihr Etikett an. Die Spalte "Prozentsatz" ermittelt automatisch den Prozentsatz aller bereitgestellten Datenpunkte. Es klingt, als ob die Spalte stattdessen die bereitgestellten Informationen einfach wiedergeben soll.