ハイチャートの列を正しく整列する

Question

ハイチャートで縦棒グラフを作成して、月間データを日時軸に表示しようとしました。問題は、バー間の間隔が異なることです。例えば、2月2日以降には小さな間隔しかなく、他の月の後には間隔が大きくなります。今月のfeburaryは28日間しかないので、これは起こっているのかもしれません。 は、とにかくここに私のコードです：

Highcharts.chart('container', { 
    chart: { 
     type: 'column' 
    }, 

    xAxis: [{ 
     type: 'datetime' 
    }, { 
     type: 'datetime', 
     visible: false 
    }], 

    plotOptions: { 
     column: { 
       grouping: false, 
     groupPadding: 0, 
     pointPadding: 0, 
     pointPlacement: 'between' 
     } 
    }, 

    series: [{ 
     name: 'Year', 
     xAxis: 1, 
     data: [25], 
     zIndex: 4, 
     color: '#222', 
     pointStart: Date.UTC(2017, 0, 1), 
     pointInterval: 1, 
     pointIntervalUnit: 'year' 
    }, { 
     name: 'Month', 
     data: [50, 100, 130, 160, 170, 200, 170, 165, 250, 200, 230, 160], 
     pointStart: Date.UTC(2017, 0, 1), 
     pointInterval: 1, 
     pointIntervalUnit: 'month', 
     zIndex: 2, 
     color: 'red', 
    }], 
}); 

http://jsfiddle.net/bosngxk1/2/

私はまた、通年の別のバーを追加しました。すでに言及した間隔の問題に気づき、年の領域が少し広すぎます。これを修正する方法はありますか？

Answer 1

あなたが気にしない場合、あなたはHighstockを使用することができます。 ordinalと呼ばれる軸オプションがあります。これをtrue（デフォルト）に設定すると、すべての点が等間隔に配置されます。下記の例を見てください。

APIリファレンス：
https://api.highcharts.com/highstock/xAxis.ordinal

例：
http://jsfiddle.net/k0k2n83p/

Answer 2

まあ、カテゴリx軸を使う以外の選択肢はないと思います。私は何とかdatetimeフォーマッタなどを使用する代わりにdatetime値をハードコードする必要があるので、私はこの解決策が気に入らない。 とにかくxAxisを次のように定義することで、希望するチャートレイアウトが得られます。

xAxis: [{ 
     categories: [ 
      'Jan', 
      'Feb', 
      'Mar', 
      'Apr', 
      'May', 
      'Jun', 
      'Jul', 
      'Aug', 
      'Sep', 
      'Oct', 
      'Nov', 
      'Dec' 
     ], 
     tickmarkPlacement: 'on' 
    }, 
    { 
     categories: [ 
      '2017' 
     ], 
     visible: false 
    }] 

フィドル：http://jsfiddle.net/hho4zrso/