highstock - Highstock: 複数の時間ラベルを持つカスタム x 軸?

Question

Highstock でカスタム xAxis を作成したいと思います。下の図は、私がやりたいことの 3 つの例を示しています。

それは可能ですか？

どうも！

Answer 1

それを達成するには 3 つの xAxis が必要です。これは、これを作成する方法の完全な例です: http://jsfiddle.net/3bQne/478/

xAxis オプション:

    xAxis: [{
        // force first axis to display one unit
        dateTimeLabelFormats: {
            hour: '%H:%M',
            day: '%H:%M',
        }
    }, {
        dateTimeLabelFormats: {
            hour: '%e. %b',
            day: '%e. %b',
        },
        // use default positioner, but with offset for labels
        tickPositioner: function(min, max) {
            var ticks = this.getLinearTickPositions(this.tickInterval, min, max),
                tLen = ticks.length;

            for(var i = 0; i < tLen; i++){
                // translate axis labels by half day to position label between ticks
                ticks[i] += 12 * 3600 * 1000;
            }

            ticks.info = {
                higherRanks: [],
                unitName: 'day',
                totalRange: max - min
            };

            return ticks;

        },
        tickWidth: 0,
        tickInterval: 24 * 3600 * 1000,
        linkedTo: 0,
        offset: 0,
        labels: {
            y: -4
        }
    }, {
        // for ticks only
        tickPosition: 'inside',
        tickLength: 10,
        tickInterval: 24 * 3600 * 1000,
        linkedTo: 0,
        offset: 0,
        labels: {
            enabled: false
        }
    }],