wie Kategorien Werte und Abstand in Etikett in highcharts zu bekommen

Question

, was ich unten zu bekommen versuchen, ist,

aber meine Ausgabe ist,

mein Code unten ist,

function aoassortmentschart() { 
$(function() { 
    $('#ao-assortments-container').highcharts({ 
     chart: { 
      type: 'column', 
      inverted : true 
     }, 
     credits: { enabled: false }, 
     title: null, 
     subtitle : null, 
     xAxis: { 
      categories: ["Cluster 5", "Cluster 4", "Cluster 3", "Cluster 2", "Cluster 1"], 
      labels: { 
       enabled: true, 
       useHTML: true, 
       formatter : function() { 
        return '<div style="margin-left: 120px,width: 100px;"><input type="radio" style="margin-right: 100px"/>' + this.categories + '</div>'; 
       } 
      }, 
      tickWidth: 0 
     }, 
     yAxis: { 
      min: 0, 
      max: 250, 

      title: { 
       useHTML : true, 
       formatter: function(){ 
        return '<div class="ao-assortment-title"><span class="shape" style="width: 40px;height:40px;bacground:green">&nbsp;</span>Sales</div>' 
       } 
      } 

     }, 
     legend : { 
      enabled: false, 

     }, 
     plotOptions: { 
      series: { 
       allowPointSelect: false, 
       paddingLeft: "50px", 
       pointInterval : 50, 

       dataLabels: { 
        align: 'top', 
        verticalAlign : "middle", 
        enabled: true, 
        useHTML: true, 
        formatter: function() { 
         return "$ " + this.y 
       }, 
       style: { 
        fontWeight: "normal", 
        textAlign: "center", 
        color: "#000" 
       } 

      } 
      }, 
      styles : { 
       minHeight : "200px" 
      }, 

     }, 
     series: [ 
     { 
      name : "5 clusters", 
      data: [198], 
      color: "#60B3D1" 
     }, 
     { 
      name: "4 clusters", 
      data: [71.5], 
      color: "#60B3D1" 
     }, 
     { 
      name: "3 clusters", 
      data: [21.5], 
      color: "#60B3D1" 
     }, 
     { 
      name: "2 clusters", 
      data: [31.5], 
      color: "#60B3D1" 
     }, 
     { 
      name: "1 clusters", 
      data: [51.5], 
      color: "#60B3D1" 
     } 
     ] 
    }); 
    // the button action 

}); } 

so,

• wie kann ich erreichen die Cluster Wert Spalte
• und Abstand der Zeichenbalken von der y-Achse?

Hilfe würde geschätzt werden !! Vielen Dank im Voraus

Answer 1

Es ist möglich, einen x-Wert für jeden Punkt festzulegen und grouping für die Serie zu deaktivieren, um ein Diagramm zu erhalten, das Ihren Anforderungen entspricht. In xAxis-Formatierer, um die Kategorie zu verwenden, verwenden Sie this.value.

Beispiel # 1: http://jsfiddle.net/Lzrje8fn/

dass x Wissen kann für Punkt gesetzt werden, können Sie alle Punkte in einer einzigen Reihe gesetzt und stellen keys Punkte.

Beispiel # 2: http://jsfiddle.net/Lzrje8fn/2/

Answer 2

Dies ist eine einfache Lösung. Verwenden Sie statt this.categories in Ihrem xAxis-Etikettenformatierer this.value.

Wenn Sie die Funktion "Formatierung" verwenden, sind Ihre Aufrufe selbstreferenziell (in diesem Fall "this" = die Kategorien, die Sie formatieren).

Ich hoffe, das hilft!