3

当サイトでは動的データを表示しています。ユーザーは、月ごと、四半期ごと、年ごと、10 年ごとなど、さまざまな種類の期間を選択できます。問題は、xAxis で四半期ごとのデータをきれいに表示しようとすることです。フォーマッタを使用して、ツールチップを「Q1 2008」として正しく表示できます。xAxis に同様のことをさせたいと考えています。私たちは部分的にそこにいますが、私はここでいくつかのファットフィンガーエラーをしていると思います. 例はjsFiddleにあります。

作業しようとしているコードは、xAxis ラベルにあり[formatter][2]ます。

xAxis: {
            alternateGridColor: '#FAFAFA',
            labels: {
                style: {
                    fontSize: '9px',
                    width: '175px'
                },
                formatter: function () {
                    var s;
                    if (Highcharts.dateFormat('%b', this.value) == 'Jan') {
                        s = s + "Q1"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Apr') {
                        s = s + "Q2"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Jul') {
                        s = s + "Q3"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Oct') {
                        s = s + "Q4"
                    };
                    s = s + " " + Highcharts.dateFormat('%Y', this.value);
                    return s;
                }
            },
            tickInterval: 31536000000,
            type: 'datetime'
        }

これは xAxis の datetime タイプを使用しており、HighCharts で実行されています。tickInterval を 3 か月 (259200000) に変更すると、梨型になります。望ましい結果は、xAxis に Q1 2007 Q2 2007 Q3 2007 Q4 2007 .. Q4 2012 のようなエントリがあることです。

4

2 に答える 2

4

tickInterval を 3 か月に設定できます

http://jsfiddle.net/yHmrZ/5/

tickInterval: 3 * 30 * 24 * 3600 * 1000,

ただし、範囲を動的に変更したい場合は、 tickPostitioner を使用する必要があります

于 2013-05-14T13:42:23.660 に答える
2

tickPositionerいつでも独自のものを使用できます。ご覧ください: http://jsfiddle.net/yHmrZ/4/

tickPositioner とフォーマッタのコード:

        labels: {
            formatter: function () {
                var s = "",
                    d = new Date(this.value),
                    q = Math.floor((d.getMonth() + 3) / 3); //get quarter
                s = "Q" + q + " " + d.getFullYear();
                return s;
            }
        },
        tickPositioner: function(min, max){
            var axis = this.axis,
                act = min,
                ticks = [];
            while( act < max ){
                ticks.push(act);
                act = act + (90 * 24 * 3600 * 1000); //three months
            }
            return ticks;
        },
于 2013-05-14T13:39:49.510 に答える