2016-11-17 92 views
0

我有一個字符,我想在xAxis類別上顯示一些文本,我將動態創建xAxis數組,每個標籤必須帶有tickInterval 5,我可以用數字來做這個,知道如何用文字,如果我的圖表做到這一點,在這裏:Dynamic xAxis Highcharts

$(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>

換句話說,我想顯示11/Dic/16 instead of 5我該怎麼辦呢?

PD。這應該工作,如果我添加另外5個值myArray和另一個日期dates

回答

0

您的第二個類別名稱的值爲1,所以它會出現在第二個勾號下。如果你想使用類別,那麼你必須填寫一些值。

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

例如:https://jsfiddle.net/ty7qs88y/

我認爲一個更好的方法不使用類別陣列,但線性軸和在標籤格式直接調用的日期陣列。

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

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

    }, 

例如:https://jsfiddle.net/ty7qs88y/1/

如果使用日期時間值 - 你總是可以使用日期時間軸,然後就格式化的顯示方式。見API Docs