HighCharts基于时间的季度数据- xAxis标签问题

HighCharts Time-based Quarterly Data - xAxis Label Issue

本文关键字：数据 季度 xAxis 问题 标签 于时间 时间 HighCharts      更新时间：2023-09-26

我们正在我们的网站上显示动态数据。用户可以选择不同类型的时间段，如月度、季度、年度、十年等。我们的问题在于如何在x轴上清晰地显示季度数据。我们可以使用格式化器将工具提示正确地显示为"Q1 2008"。我们想让x轴做类似的事情。我们部分做到了，但我想我在这里犯了一些错误。示例为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的日期时间类型，并在HighCharts下运行。如果我将tickInterval更改为3个月(259200000)，它就会变成梨形。我们期望的结果是，xAxis有这样的条目:2007年一季度2007年第二季度2007年第三季度2007年第四季度．．2012年第四季度

可以设置tickInterval为三个月

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

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

但是当你想动态改变范围时，你应该使用tickpositioner

您可以始终使用自己的tickPositioner，看看:http://jsfiddle.net/yHmrZ/4/

以及tickPositioner和formatter的代码:

        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;
        },
相关文章：