2

High charts には、チャートの日付を生成する非常に優れた方法があります。

ただし、各ポイントの日付を生成するには tickInterval を指定する必要があるため、1 か月間隔は不規則であるため非常に困難です。

推奨されるアプローチは、31 日に等しいティック間隔を使用することですが、2 月がスキップされる多くのユース ケースがあります。

高いチャートで1か月の自動生成されたティック間隔を持つ信頼できる方法はありますか?

4

3 に答える 3

2

不規則な間隔のデータに対して提供された例が問題を解決するようです: Highcharts Demo - Irregular Time Interval

その例から、x 軸のラベル付けに関連するコードは次のとおりです。

xAxis: {
   type: 'datetime',
   dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
   }
},
于 2013-02-25T07:13:19.950 に答える
1

これはかなり大雑把ですが、基本的な考え方は理解できるはずです。関連フィドル here。

xAxis: {
    minPadding: 0,
    // Ticks in binary positions
    tickPositioner: function(min, max) {

        var pos,
            tickPositions = [],
            tickStart = 0;

        var tick = 0;
        for (pos = 1; pos <= 12; pos++) {
            tick += new Date(2013, pos, 0).getDate();
            tickPositions.push(tick);
        }
        return tickPositions;

    },
    // Only show labels where there is room for them
    labels: {
        formatter: function() {
            var tick = 0;
            for (pos = 1; pos <= 12; pos++) {
                 if (tick == this.value) 
                     return monthNames[pos - 1];
                 tick += new Date(2013, pos, 0).getDate();
            }
        }
    }

プロパティ 'tickPositioner' を使用すると、目盛りを生成するカスタム関数を設定できます。また、ラベルの下のプロパティ 'formatter' を使用すると、どの目盛りがラベルを生成し、どのような目盛りにするかを決定できます。これら 2 つの間で月を生成できます。

いくつかの注意事項:

  • 2013年をハードコーディングしたのは、正確なユースケースが何であるかがよくわからないためです。異なる日数を持つ異なる年と、データが属する年を考慮する必要があります。
  • 私のコードでは、ラベルが設定されている日に関連するエラーが 1 つずつ簡単に発生する可能性があります。一般的な概念を示すためだけに、コードを簡単にまとめました。
  • この例をより DRY にするために削除できるかなりの量の重複があります。
于 2013-02-25T07:14:42.857 に答える
1 
xAxis: {
    type: 'datetime',
    tickPositioner: function(min, max) {
        var ticks = [];
        var maxDate = new Date(max);
        var tickDate = new Date(min);
        while (tickDate <= maxDate) {
            ticks.push(tickDate.getTime());
            tickDate.setMonth(tickDate.getMonth() + 1);
        }
        ticks.info = {
            unitName: "month",
            higherRanks: {}
        };
        return ticks;
    },
    labels: {
        rotation: -45,
        align: 'right',
        x: 5
    }
}
于 2014-05-01T18:44:29.193 に答える