Highcharts 图表删除类别（x 轴）上间隔中的现有刻度

Posted 2023-03-14

【中文标题】Highcharts 图表删除类别（x 轴）上间隔中的现有刻度

【英文标题】：Highcharts graph remove existing ticks in interval on a category (x-axis)

【发布时间】：2017-08-22 01:35:35

【问题描述】：

我有一个实时图表，每 x 次更新一次。下面包括一个使用虚拟变量的图像。我想要的是 Highcharts 只标记第一个、中间和最后一个。或者任何我不会在我的图表标签上用刻度线发送垃圾邮件的地方。

目前我的 xAxis 看起来像这样：

xAxis: 
    crosshair: true,
    type: "categories",
    categories: xaxis
,

没有什么不寻常的。我已经尝试添加一个 tickInterval，但是，从长远来看，这并不能真正解决问题。本质上，我需要的是与 tickInterval 相反的，在某个时间间隔后会删除刻度。与 highcharts 目前拥有的日期时间 API 不同。这里的不同之处在于，这些数据不能由我自己生成，而是由我正在使用的 API 生成，它会吐出如图所示的 x 轴标签。

【参考方案1】：

一段时间后，如果图表上显示的 xAxis 标签过多，它们的数量会自动减少（第一个示例）。虽然，如果你愿意，你可以使用几个解决方案。最好的方法是使用tickPositioner 仅显示第一个、中间和最后一个标签，并在xAxis.labels.formatter 中使用Highcharts.dateFormat 格式化它们（第二个示例）。您还可以将step 设置为更大的xAxis.labels（第三个示例）。

API 参考：http://api.highcharts.com/highcharts/xAxis.tickPositionerhttp://api.highcharts.com/highcharts/Highcharts.dateFormathttp://api.highcharts.com/highcharts/xAxis.labels.step

示例：http://jsfiddle.net/vxjdwer7/ - 默认行为http://jsfiddle.net/30t45zvq/ - 使用刻度定位器http://jsfiddle.net/6g9uvokL/ - 使用步骤

【讨论】：

谢谢。这里唯一挥之不去的问题是我希望将此行为应用于类别。因此，如果我将 [apple, bear, banana, orange, etc, etc] 作为 x 值，我只想显示第一个、中间和最后一个类别值。您的 tickPositioner 示例使用日期时间。

只需将 xAxis.type 更改为 category 并使用类别数组。示例：jsfiddle.net/307a2o3v.

我从您最近在http://jsfiddle.net/307a2o3v/ 的示例中注意到的一件事是，如果我启用缩放功能，x 轴将保持不变并且与我放大的图表部分不对应。例如，如果我放大 Apple 和 Banana 之间的区域，我将看不到熊。