, highchart

Question

ben şimdi sana aşağıda görsel görebileceğiniz gibi Xaxis için alternatif renk verdik x ekseni grid.right üzerinde arsa hizaya çalışıyorum içinde ızgara merkezinde arsa hizalamak

ama i aşağıda

benim kodudur, dikey orta mavi arsa çubuğunu hizalamak aşağıda kodu ve görsel bir göz lütfen ve bunun için herhangi bir çözüm varsa bana bildirin mümkün değilim

function aoassortmentschart() { 
$(function() { 

    $('#ao-assortments-container').highcharts({ 
     chart: { 
      type: 'column', 
      inverted: true, 
      verticalAlign: "center" 
     }, 
     credits: { enabled: false }, 
     title: null, 
     subtitle: null, 

     xAxis: { 
      alternateGridColor: '#F7F7F7', 
      gridColor: "#000", 
      offset: 120, 
      categories : ["Cluster 1", "Cluster 2", "Cluster 3", "Cluster 4", "Cluster 5"], 
      tickWidth: 0, 
      lineWidth:0, 
      min: 0, 
      max: 4, 
      labels: { 
       enabled: true, 
       useHTML: true, 
       x : 100, 
       formatter: function() { 
        return '<div><input type="radio" class="ao-assortment-radio" style="margin-right: 10px" size="10" name="assortmentClusterValue"/><span style="margin-left: 10px ;width: 100px; background: #5867C2; padding: 10px 5px; color : #fff; text-align : center">' + this.value + '</span></div>' 
       } 
      } 
     }, 
     yAxis: { 
      min: 0, 
      max: 250, 
      pointInterval: 50, 
      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: { 

        pointWidth: 31, 
        allowPointSelect: false, 
        marginLeft: 50, 
        dataLabels: { 
         align: 'center', 
         enabled: true, 
         useHTML: true, 
         x:-30, 
         formatter: function() { 
          return "$ " + this.y 
         }, 
         style : { 
          fontWeight: "normal", 
          textAlign: "center", 
          color: "#fff", 

         } 

        } 
       } 

     }, 
     series: [ 
      { 
       name : "Cluster 1", 
       data: [200, null, null, null, null], 
       color: "#60B3D1" 
      }, 
      { 
       name: "Cluster 2", 
       data: [null, 120, null, null, null], 
       color: "#60B3D1" 
      }, 

      { 
       name: "Cluster 3", 
       data: [null, null, 240, null, null], 
       color: "#60B3D1" 
      }, 

      { 
       name: "Cluster 4", 
       data: [null, null,null ,170 , null], 
       color: "#60B3D1" 
      }, 

      { 
       name: "Cluster 5", 
       data: [null, null,null ,null ,100 ], 
       color: "#60B3D1" 
      } 
     ] 
    }); 
    // the button action 

}); 

Aşağıdaki resimde gösterildiği gibi 210

, mavi çubuğun ızgara ortasında dikey olarak hizalanmasını istiyorum. açıkladığınız Ne

Answer 1

varsayılan davranıştır.

Yerleşim, her veri noktası için bir seriye sahip olmanızdan etkileniyor - grafik, eklediğiniz boş noktalar için biraz boşluk yapıyor.

Verilerinizi tek bir diziye koyarsanız, sorun gider.

series: [ 
    { 
    name: "Clusters", 
    data: [200, 120, 240, 170, 100], 
    color: "#60B3D1" 
    } 
] 

Örnek:

• http://jsfiddle.net/jlbriggs/3d3fuhbb/138/