2016-08-16 6 views
0

enter image description here私は助けが必要ですハイチャートXaxis複数のラベル

イメージの高チャートは可能でしょうか?赤い四角い箱のラベル。私は機能を見つけることができません ...

ラベルの日の夜は、 2lineラベル日時(マージ)

1LINE

2016年8月16日日/ 2016年8月16日夜||| 2016年8月17日日/ 2016年8月17日夜

 2016-08-16      2016-08-17 

javascriptのソース

$(function() { 
    $('#container').highcharts({ 

     chart: { 
      type: 'column' 
     }, 

     title: { 
      text: 'Total fruit consumtion, grouped by gender' 
     }, 

     xAxis: { 
      categories: ['DAY', 'NIGHT', 'DAY', 'NIGHT'] 
     }, 

     yAxis: { 
      allowDecimals: false, 
      min: 0, 
      title: { 
       text: 'Number of fruits' 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.x + '</b><br/>' + 
        this.series.name + ': ' + this.y + '<br/>' + 
        'Total: ' + this.point.stackTotal; 
      } 
     }, 

     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 

     series: [{ 
      name: 'John', 
      data: [5, 3, 4, 7, 2], 
      stack: 'male' 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 5], 
      stack: 'male' 
     }, { 
      name: 'Jane', 
      data: [2, 5, 6, 2, 1], 
      stack: 'female' 
     }, { 
      name: 'Janet', 
      data: [3, 0, 4, 4, 3], 
      stack: 'female' 
     }] 
    }); 
}); 

追加のx軸の下にはに日付を追加したいです。

+1

はかつてこのような何かをしようとしました。私が知る限り、これを行うための組み込みの方法はありません。これらの行に沿って何かをするプラグインがあります:http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories – Piittis

答えて

0

カテゴリに<br>を追加すると、複数の行を持つ軸になります。余分な行は、グループ化されたタイトルのように見えます。

xAxis: { 
     type: 'category', 
     categories: ['Jan<br>一月<br>Q1', 'Feb<br>二月', 'Mar<br>三月', 
        'Apr<br>四月<br>Q2', 'May<br>五月', 'Jun<br>六月', 
        'Jul<br>七月<br>Q3', 'Aug<br>八月', 'Sep<br>九月', 
        'Oct<br>十月<br>Q4', 'Nov<br>十一月', 'Dec<br>十二月'] 
    }, 

https://jsfiddle.net/rockiey/t5xuo9do/

関連する問題