HighCharts基于时间的季度数据 - xAxis标签问题 [英] HighCharts Time-based Quarterly Data - xAxis Label Issue

问题描述

我们在我们的网站上显示动态数据。用户可以选择不同类型的时间段，如每月，每季度，每年，每年等。我们的问题是试图在xAxis上清楚地显示季度数据。我们可以使用格式化工具正确显示工具提示为2008年第一季度。我们希望xAxis做类似的事情。我们部分在那里，但我认为我在这里做了一些胖手指的错误。示例位于 jsFiddle 。

代码我们正在尝试使用的是xAxis标签 [formatter] [2] ：

  xAxis：{
 alternateGridColor：'#FAFAFA'，
标签：{
 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，
类型：'datetime'
} 
  

这是使用日期时间类型的xAxis，并且正在HighCharts下运行。如果我将tickInterval更改为3个月（259200000），它会变成梨形。
我们期望的结果是，xAxis的参赛项目如下：
Q1 2007
Q2 2007
Q3 2007
Q4 2007
..
Q4 2012

解决方案

您可以将tickInterval设置为三个月

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

  tickInterval：3 * 30 * 24 * 3600 * 1000，
  

但是，当您想要动态更改范围时，您应该使用tickPostitioner

We are displaying dynamic data on our site. The user can select different types of time periods such as monthly, quarterly, annual, decennial, etc. Our issue comes in trying to show quarterly data cleanly on the xAxis. We can use the formatter to show the tool-tip correctly as "Q1 2008". We want to have the xAxis do something similar. We are partially there but I think I am doing some fat-finger error here. Example is on jsFiddle.

The code that we are trying to work with is in the xAxis label [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'
        }

This is using a datetime type of xAxis and is running under HighCharts. If I change the tickInterval to 3 months (259200000) it goes pear shaped. Our desired outcome is that the xAxis has entries like: Q1 2007 Q2 2007 Q3 2007 Q4 2007 .. Q4 2012

解决方案

You can set tickInterval as three months

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

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

But when you would like to dynamic change ranges, you should use tickPostitioner

这篇关于HighCharts基于时间的季度数据 - xAxis标签问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！