Highcharts Wie zeichnet man einen negativen Stapel mit zwei Achsen?

Question

Ich habe alle über das Internet gesucht und kann nicht scheinen, eine highchart die wie folgt aussieht zu finden:

Highcharts ein Beispiel hat (https://www.highcharts.com/demo/bar-negative-stack), aber ich kann nicht scheinen, einen Satz zu bewegen von der Bar, so gibt es Platz, um Etiketten zwischen den beiden Serien hinzuzufügen. Irgendwelche Tipps?

Answer 1

Wenn width von Achsen manipulieren, können Sie Prozentsätze verwenden. Schauen Sie sich das Beispiel unten an.

API-Referenz:
http://api.highcharts.com/highcharts/xAxis.categories
http://api.highcharts.com/highcharts/plotOptions.bar.pointPadding

Beispiel: siehe `plotOptions` in
http://jsfiddle.net/vkzzbvgw/

Answer 2

Managed eine grobe Version zum Laufen zu bringen:

http://jsfiddle.net/willycheung/xqw1x012/4/

var categories = ['<strong>Michael Bachman</strong><br>90% ($2.42M)', '<strong>Neil Anderson</strong><br>85% ($2.15M, <span style="color:orange">$750k</span>)', '<strong>Kelvin Luis</strong><br>63% ($1.5M)', '<strong>Steven Yellen</strong><br>62% ($1.2M, <span style="color:orange">$45k</span>)', '<strong>Richard Wally</strong><br>60% ($952K)', '<strong>Varian Lopez</strong><br>40% ($125K)', '<strong>Charlie Schema</strong><br>38% ($120K, <span style="color:red">$80k</span>)', '<strong>Ben Shorty<strong><br>36% ($450K, <span style="color:red">$120k</span>)', '<strong>Stephanie Smiles</strong><br>28% ($550K)', '<strong>Bruce Wallus</strong><br>25% ($104K)', 
          '<strong>Rick Martin</strong><br>24% ($390K)', '<strong>Natale Salesy</strong><br>21% ($330K)']; 

$(document).ready(function() { 
    Highcharts.chart('container', { 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: null 
     }, 

     xAxis: [{ 
      categories: categories, 
      gridLineidth: 0, 
      minorGridLineWidth: 0, 
      lineWidth: 0, 
      tickWidth: 0, 
      labels: { 
       enabled: false 
      } 
     }, { // miror axis on right side 
      categories: categories, 
      gridLineWidth: 0, 
      minorGridLineWidth: 0, 
      lineWidth: 0, 
      tickWidth: 0, 
      linkedTo: 0, 
         labels: { 
       align: 'center' 
      } 
     }], 
     yAxis: [{ 
      title: { 
       text: null 
      }, 
      labels: { 
       enabled: false 
      }, 
      gridLineWidth: 0, 
      minorGridLineWidth: 0, 
      lineWidth: 0, 
      left:-60, 
      width: 250 
     },{ 
      title: { 
       text: null 
      }, 
      labels: { 
       enabled: false 
      }, 
      gridLineWidth: 0, 
      minorGridLineWidth: 0, 
      lineWidth: 0, 
      left:300, 
      width: 250 
     }], 

     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0); 
      } 
     }, 

     series: [{ 
      name: 'Male', 
      data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2, 
       -3.0, -3.2, -4.3, -4.4, -3.6] 
     }, { 
      name: 'Female', 
      yAxis: 1, 
      data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9, 
       3.1, 4.1, 4.3, 3.6] 
     }] 
    }); 
});