Wie werden HighCharts (Balkendiagramm) Balken nach oben/vorne ausgerichtet?

Question

Ich stehe vor diesem Problem mit HighCharts - Balkendiagramme.

Wenn mein Dataset nicht genügend Daten enthält (sagen wir, es gibt nur zwei Balken in einem Diagrammbereich, der 20 Balken anzeigen soll), dehnen sich die Balken superdick aus. Gefallen Sie diese Geige: http://jsfiddle.net/32toL65L/

, also die Stäbe nach oben zu schieben, fügte ich

plotOptions-> car-> maxPointSidth:15; //Fix max bar width to 15 pixels 
x-axis -> max : 20; // Move bars to top two positions 
series[0].data. push(['',0]) x 18 times // to display 18 empty blocks 

es fast fast gearbeitet ..! Aber Zahlen werden 3-20 in xAchse Label angezeigt, die ich nicht herausfinden kann, wie zu entfernen .. Dies ist die letzte Geige: http://jsfiddle.net/aux4vgmq/

Was mache ich falsch? Warum werden diese Zahlen angezeigt, wenn mein Dataset mit leeren Zeichen für die X-Achsenbeschriftung gefüllt ist?

Könnten Sie bitte Vorschläge machen, wie Sie diese zusätzlichen Nummern entfernen oder wie Sie HighCharts konfigurieren, um Balken nach oben auszurichten?

Vielen Dank im Voraus!

Answer 1

Sie können xAxis mit setCategories einstellen. Dynamische Möglichkeit, die Set-Kategorien für xAxis aus der Serie zu generieren.

Highcharts.chart('container', { 
    chart: { 
     type: 'bar', 
     events: { 
       load: function (e) { 
       var series_data=this.series[0].data 
       var categoriesArr=[]; 
       for(var i=0;i<series_data.length;i++){ 
          categoriesArr.push(series_data[i].name) 
       } 
        this.xAxis[0].setCategories(categoriesArr); 
      } 
     } 
    }, 
    title: { 
     text: 'World\'s largest cities per 2014' 
    }, 
    subtitle: { 
     text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>' 
    }, 
    xAxis: { 
      max:10, 
     type: 'category', 
     labels: { 
      rotation: 0, 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Population (millions)' 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    tooltip: { 
     pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' 
    }, 
    plotOptions:{ 
      bar :{ 
      maxPointWidth:15 
      } 
     }, 
    series: [{ 
     name: 'Population', 
     data: [ 
      ['Shanghai', 23.7], 
      ['Lagos', 16.1], 
      ['',0], 
      ['',0], 
      ['',0], 

      ['',0], 
      ['',0], 
      ['',0], 
      ['',0], 
      ['',0], 
      ['',0], 

     ] 
    }] 
}); 

Fiddle link

Answer 2

die Kategorienamen Geben Sie in der xAchse Definition und nicht in den Daten.

xAxis: { 
    max: 10, 
    type: 'category',   
    categories: ['Shanghai', 'Lagos','','','','','','','','',''] 
} 

http://jsfiddle.net/e3hw4pv4/

Answer 3

Danke für die Lösung Gayan Dasanayake & Tief 3015.

fand ich eine schmutzige Art und Weise, dieses Problem zu beheben, indem blankspace Strings unterschiedlicher Länge für xAchse Labels verwenden. Ich bin durch Versuch und Irrtum über diese Lösung gestolpert und ich bin mir nicht ganz sicher, warum es funktioniert.

data: [ 
     ['Shanghai', 23.7], 
     ['Lagos', 16.1], 
     ['',0], 
     [' ',0], 
     [' ',0], 

     [' ',0], 
     [' ',0], 
     ['  ',0], 
     ['  ',0], 
     ['  ',0], 
     ['  ',0] 

    ] 

http://jsfiddle.net/4voq0hb9/2/

ich es vorziehen, Ihre Lösung als xAchse Kategorien dynamisch Einstellung auf jeden Fall ein sauberer Weg ist als Strings mit blankspaces zu erzeugen.