javascript - Highcharts X 轴问题

Question

在决定在这里问这个问题之前，我已经用谷歌搜索并搜索了很多堆栈溢出，因为虽然有些问题看起来很相似，但没有一个解决方案适合我。

我对有时范围很广的数据进行了分类，例如 1881 - 2012 年，并且希望动态计算该范围并将其划分为 x 轴上的 11 个点，这是我在不启用缩放的情况下有空间显示的内容。如果数据来自 1881 - 2012 年，我希望它显示(未精确计算)1881 年、1901 年、1921 年、1941 年......如果是 1958 年 - 2013 年，则显示 1958 年、1968 年、1978 年....

xAxis: {
           categories: range(start_year,end_year),
           tickmarkPlacement: "on",
           tickInterval: Math.ceil(range(start_year,end_year).length/11), 
       },

.......

function range(start_year,end_year)
  {
    var years = [];

    for(var i = start_year;i<=end_year;i++)
    {
        years.push(i); 
    }
    return years;
  } 

这段代码的作用只是跳过某些年份的标签，但仍然在图表上绘制导致 x 轴重叠年份的点。

任何有关这方面的线索都将受到高度赞赏。

这是说明我的困境的 fiddle http://jsfiddle.net/YUPzk/4/

Answer 1

您可以使用tickPositioner并准备自己的计算函数。
下面的 JavaScript 是如何完成此操作的一个示例:
Highcharts.chart('container', {
title: {
text: 'Custom tick positions'
},
subtitle: {
text: 'through axis.tickPositions and axis.tickPositioner'
},
xAxis: {
tickPositions: [0, 1, 2, 4, 8]
},
yAxis: {
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}
},
series: [{
data: [ [0, 1],[1, 3],[2, 2],[4, 4],[8, 3] ]
}]
});


The above demo code can be found at this jsfiddle