2017-02-07 29 views
0

X軸のカテゴリ値をHighChartsチャートに表示させようとしている状況がありますが、x軸の各ビンの中心ではなく、ティックを並べて表示します。 X軸のテキスト「カテゴリ」を使用しているようです。これを行う簡単な方法はありますか?ここでハイチャートX軸ラベリング

は私のオプションのjson.stringifiedバージョンのサンプルとスクリーンショットです:

Highcharts.chart('container', { 
    "chart":{ 
     "renderTo":"", 
     "zoomType":"xy", 
     "alignTicks":false, 
     "animation":false, 
     "height":600, 
     "type":"line", 
     "backgroundColor":"#fff", 
     "resetZoomButton":{ 
     "theme":{ 
      "fill":"white", 
      "stroke":"silver", 
      "r":0, 
      "states":{ 
       "hover":{ 
        "fill":"#7ac142", 
        "style":{ 
        "color":"white" 
        } 
       } 
      } 
     } 
     }, 
     "options3d":"", 
     "panning":true, 
     "panKey":"shift" 
    }, 

    title: { 
     text: 'Step line types, with null values in the series' 
    }, 
xAxis:{ 
     "align":"left", 
     "categories":[ 
     "0:00", 
     "1:00", 
     "2:00", 
     "3:00", 
     "4:00", 
     "5:00", 
     "6:00", 
     "7:00", 
     "8:00", 
     "9:00", 
     "10:00", 
     "11:00", 
     "12:00", 
     "13:00", 
     "14:00", 
     "15:00", 
     "16:00", 
     "17:00", 
     "18:00", 
     "19:00", 
     "20:00", 
     "21:00", 
     "22:00", 
     "23:00" 
     ], 
     "title":{ 
     "text":"", 
     "style":{ 
      "color":"#3E576F", 
      "font-family":"Verdana", 
      "font-size":"12px" 
     } 
     } 
    }, 
"series":[ 
     { 
     "data":[ 
      72.2, 
      71.5, 
      71.7, 
      71.2, 
      73.6, 
      73.5, 
      72, 
      71.4, 
      69.7, 
      70.8, 
      70.9, 
      71.3, 
      72, 
      null, 
      null, 
      null, 
      null, 
      null, 
      null, 
      null, 
      null, 
      null, 
      null, 
      null 
     ], 
     "name":"The Data", 
     "color":"#1AC8ED" 
     }, 
    ], 

}); 

Example

+0

がtickmarkPlacement' http://api.highcharts.com/highcharts/xAxis.tickmarkPlacement – jlbriggs

答えて

0

これはtickmarkPlacement optionを使用して設定することができます。カテゴリ化された軸の場合はデフォルトでbetween、その他の軸の場合はonです。あなたはそれをonに設定する必要があります。例えば

JSFiddle):

xAxis:{ 
    tickmarkPlacement: 'on' 
    // ... 
} 
+0

'を見ては、それが必要だっただけで正確に何だった、あなたにHalvorありがとう:) –

関連する問題