我们在我们的网站上显示动态数据。用户可以选择不同类型的时间段,例如每月、每季度、每年、每十年等。我们的问题在于试图在 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 的日期时间类型并在 HighCharts 下运行。如果我将 tickInterval 更改为 3 个月(259200000),它会变成梨形。我们期望的结果是 xAxis 具有如下条目:Q1 2007 Q2 2007 Q3 2007 Q4 2007 .. Q4 2012