Dynamische xAxis Highcharts

Question

Ich habe ein Zeichen und ich möchte etwas Text auf den xAxis Kategorien anzeigen, ich werde XAxis Array dynamisch erstellen, jedes Etikett muss mit einem tickInterval von 5 sein, kann ich dies mit Zahlen tun, aber ich don ' t wissen, wie es mit dem Text zu tun, hier, wenn mein Diagramm:

$(document).ready(function() { 
 
    $('#xd').click(function() { 
 
    draw(); 
 
    }); 
 
}); 
 

 
function draw() { 
 
    var myArray = []; 
 
    myArray = [1, 5, 10, 11, 8, 6, 7 ,8 ,9, 10]; 
 
    var dates = []; 
 
    dates = ["11/Nov/16", "11/Dic/16"]; 
 
    
 
    $('#grafic').highcharts({ 
 
     
 
     title: { 
 
      text: 'Sampled Parts' 
 
     }, 
 
     xAxis: { 
 
      tickInterval:5, 
 
      categories: dates, 
 
      labels: { 
 
       rotation: -33, 
 
      }, 
 
      
 
     }, 
 
     yAxis: { 
 
      allowDecimals: true, 
 
      min: 0, 
 
      title: { 
 
       text: 'Resultados' 
 
      } 
 
     }, 
 
     tooltip: { 
 
      formatter: function() { 
 
       return '<b>' + this.x + '</b><br/>' + 
 
        this.series.name + ': ' + this.y + '<br/>' + 
 
        'Total: ' + this.point.stackTotal; 
 
      } 
 
     }, 
 

 
     legend: { 
 
      reversed: true 
 
     }, 
 
     plotOptions: { 
 
      column: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: 'My Data', 
 
      data: myArray 
 
     }] 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 

 

 
<div id="grafic"> 
 
</div> 
 

 
<button id="xd">Click</button>

mit anderen Worten: ich mag 11/Dic/16 instead of 5 zeigen, wie kann ich das tun?

PD. Dies sollte funktionieren, wenn ich dann weitere 0 Werte zu myArray und ein anderes Datum zu dates hinzufüge.

Answer 1

Ihr zweiter Kategoriename hat den Wert 1, also würde er unter dem zweiten Tick erscheinen. Wenn Sie Kategorien verwenden möchten, müssen Sie sie mit einigen Werten füllen.

dates = ["11/Nov/16", '', '', '', '', "11/Dic/16"]; 

Beispiel: https://jsfiddle.net/ty7qs88y/

Ich denke, eine bessere Art und Weise ist nicht Kategorien Array, sondern eine Linearachse und in der Etikettenformatierer aufrufen direkt die Daten-Array.

xAxis: { 
     tickInterval:5, 
     type: 'linear', 

     labels: { 
      rotation: -33, 
      formatter: function() { 
       return dates[this.value/5]; 
      } 
     }, 

    }, 

Beispiel: https://jsfiddle.net/ty7qs88y/1/

Wenn Sie Datums- und Uhrzeitwerte verwenden - Sie können immer Datetime-Achse verwenden und dann nur zu formatieren, wie es angezeigt wird. Siehe API Docs