2016-11-17 86 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