在高图表柱形图类型中设置最大列量

Question

我正在尝试为我的Highchart柱形图设置最大列量，如下所示

xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Kiwi'],
    tickAmount: 3
}

阅读文档说使用tickAmount设置轴数。

由于空间限制，我希望我的图表只显示三个 xAxis。这需要动态发生，因此无法从数组中删除项目。

这是我的 jsfidddle http://jsfiddle.net/rjayako/mt4x95rd/1/

任何帮助将不胜感激。

Answer 1

来自 tickAmount 文档：

此选项仅对线性轴有影响。日期时间、对数或分类轴不受影响。

你的轴是一个类别轴。

您可以尝试使用 tickInterval 和一些额外的计算来实现类似的效果：

var categories =  ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Peaches', 'Lemons', 'Apricots']
var tickAmount = 3
//best effort, for tickAmounts > categories.length / 2 it will show all ticks
var tickInterval = tickAmount > 1
    ? Math.floor((categories.length - 1) / (tickAmount - 1))
  : tickAmount == 1 ? categories.length : NaN

然后

xAxis: {
    categories: categories,
    tickInterval: tickInterval
}

http://jsfiddle.net/peterlgh7/6anq4p8s/

编辑：阅读您的评论后，鉴于您不仅要隐藏刻度线，还要隐藏列，我在文档中找不到任何内容。我的建议仍然是预处理您的数据，即过滤它。您可以定期对其进行采样，类似于tickInterval的工作方式，或者您可以简单地获取前n个元素，因为它可能对您没有影响。您可以在此处看到两种方式：http://jsfiddle.net/peterlgh7/L9fa1hg9/

但这都是javascript，不涉及高图表。

Answer 2

您可以

设置tickInterval: n以使其跳过轴中每 n 个项目。

xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    tickInterval: 2
},

http://jsfiddle.net/mt4x95rd/2/

Answer 3

可以使用xAxis.max属性来设置可以在 x 轴上显示的最大索引。类别索引从0开始，它们是后续整数。

xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    max: 2
}

---

现场演示：http://jsfiddle.net/kkulig/q9p3b8hw/

API 参考：https://api.highcharts.com/highcharts/xAxis.max