2016-11-17 10 views
0

私はcharを持っていて、xAxisカテゴリにテキストを表示したい、xAxis配列を動的に作成する、すべてのラベルがtickInterval5でなければならない、数字でこれを行うことができるが、 tはテキストでそれを行う方法を知って、ここに私のチャートの場合:つまりダイナミックxAxisハイチャート

$(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に追加し、もう1つの値をdatesに追加すると機能します。

答えて

0

2番目のカテゴリ名の値が1であるため、2番目のティックの下に表示されます。カテゴリを使用する場合は、値を入力する必要があります。

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]; 
      } 
     }, 

    }, 

例:あなたはdatetime値を使用している場合https://jsfiddle.net/ty7qs88y/1/

- あなたは常に日時軸を使用して、ちょうどそれが表示されている方法をフォーマットすることができます。 API Docs

関連する問題