Highcharts 导航器填充生成新的刻度答案

【问题标题】：Highcharts navigator padding generating new tickHighcharts 导航器填充生成新的刻度
【发布时间】：2018-01-17 17:04:24
【问题描述】：

在我的柱形图上启用导航器后，我意识到 X 轴上的两个极端都被修剪了。

我使用事件 afterSetExtremes 应用了某种填充，但由于数据范围是动态的，因此有时我会得到标记为 -1 或 30 的新刻度。

我创建了一个描述问题的 jsfiddle。

http://jsfiddle.net/aabreuglez/hzu4twjg/11/

events: {
     afterSetExtremes: function (e) {
                    const length = (e.max - e.min) || 1;
                    const minPadding = 0.02;
                    const maxPadding = 0.02;

                    if (e.min === this.chart.xAxis[0].dataMin || e.max === this.chart.xAxis[0].dataMax) {
                        if (e.min === this.chart.xAxis[0].dataMin) {
                            e.min -= length * minPadding;
                        }
                        if (e.max === this.chart.xAxis[0].dataMax) {
                            e.max += length * maxPadding;
                        }
                        this.setExtremes(e.min, e.max);
                    }
                }
            },

（如果您将轴缩放到极端，您可以找到空列）

我能否将导航器范围锁定在最小值和最大值之间，以避免滚动条超出这些极端值？

【问题讨论】：

你说我创建了一个描述问题的jsfiddle。。没有 jsfiddle 现场演示
我忘记粘贴链接了！我编辑了，谢谢

标签： javascript highcharts navigator

【解决方案1】：

您可以为导航器的轴设置minPadding 和maxPadding。这里的技巧是，它需要通过更新已经渲染的轴（在chart.events.load）而不是提供选项（navigator.xAxis - 它不会工作）来完成。

minPadding 和 maxPadding 是分数 - 也许您可以为它们找到合适的值，并且不会发生此问题。

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

    chart: {
      type: 'column',
      events: {
        load: function() {              
          this.navigator.xAxis.update({
            minPadding: 0.007,
            maxPadding: 0.007
          });
        }
      }
    },

API 参考：

【讨论】：

感谢您的回答，问题是我的范围并非在所有图表中都是固定的。我目前正在跟踪github.com/highcharts/highcharts/issues/1172，其中选项 pointRange = null 似乎可以解决问题，但会根据缩放在开头生成额外的列（即使我强制 starOnTick 为 false）。