HighStock 开始月份 rangeSelector 和 series.compare 在初始负载上不起作用答案

【问题标题】：HighStock Start Month rangeSelector And series.compare Not Working on Initial LoadHighStock 开始月份 rangeSelector 和 series.compare 在初始负载上不起作用
【发布时间】：2015-05-07 22:43:06
【问题描述】：

我们正在努力创建一个库存图表，显示几个项目甚至计数及其相对百分比随时间的变化。数据是每月的，我们设置了一个范围选择器，以允许 6 个月、9 个月、1 年和所有数据。在初始加载时，我们选择 6 个月的范围。我们注意到一些奇怪的影响。这是代表问题的示例 jsFiddle： http://jsfiddle.net/wergeld/wq7eavq4/

rangeSelector 代码：

rangeSelector: {
    inputEnabled: false,
    allButtonsEnabled: false,
    buttons: [{
        type: 'month',
        count: 6,
        text: '6 Months'
    }, {
        type: 'month',
        count: 9,
        text: '9 Months'
    }, {
        type: 'year',
        count: 1,
        text: 'Year'
    }, {
        type: 'all',
        text: 'All'
    }],
    buttonTheme: {
        width: 60
    },
    selected: 0
},

1) 在初始加载时，0%“开始”发生在 2014 年 10 月的数据点中，并且从该点计算相对百分比变化。但是，图表中显示的第一个点实际上是 2014 年 9 月。这与（我猜）2014 年 10 月相比有一些百分比的变化。

2) 当我们将选择更改为 9 个月范围选择器时，我们看到 2014 年 6 月的第一个点是 0% 值。然后，如果我们单击返回到 6 个月范围选择器值，您会看到现在我们将 2014 年 9 月作为 0%，并且以后时间的百分比差异都与初始加载时不同。

我的问题是：

一个。为什么当我将 rangeSelector 的计数设置为 6 时会显示 7 个月，而当我将另一个范围选择器的计数设置为 9 个月时为什么会显示 10 个月？基本上对于给定的rangeSelector.count，我得到的比我预期的多。

b.为什么初始加载时的 0% 点与我点击离开该范围并返回该范围时不同？

【问题讨论】：

a) 一开始我也很困惑，但是整整六个月。从 9 月 1 日开始，增加 6 个月，并在 3 月 1 日返回。代码示例：最后一点=new Date(Date.UTC(2015, 2))-> 3 月 1 日，第一点=new Date(Date.UTC(2015, 2-6))->9 月 1 日。b) 我很确定有一个关于不同规模的错误报告初始加载和以后管理图表之间的轴。让我搜索它并回复您。
我可以处理 a) 包括上个月在内的 6 个月，所以 7 个月。但是，b）当点的比较发生在第 6 个月而不是第 7 个月时，关闭并不好……然后在稍后的点击中转到第 7 个月。如果我在初始化加载时选择单年范围，那是正确的。（对我来说）只是月份选择器总是不正确的。
事实上，这取决于数据——有时是几个月，有时是几年。相关票证：a) #966 和 b) #4147。关于b)，reported是with column，但实际上是一样的：jsfiddle.net/wq7eavq4/2
我想我们可以在图表加载时调用setExtremes：jsfiddle.net/wq7eavq4/4 - 但是动画会丢失。如果您需要动画，那么我看不到比预先计算最小值和最大值更好的解决方案，以便稍后在 xAxis.min 和 xAxis.max 中使用。
而不是应用选定的按钮时，导航器还没有准备就绪，因此不计入第二个Xaxis的极端。稍后，当您单击按钮时，所有内容都是初始化的，因此它可以正常工作。

标签： highcharts highstock

【解决方案1】：

这与两个错误有关：

#966
#4147

这是由于在图表完全呈现之前在核心中设置了极端值。可能的解决方法是放弃 selected 选项并创建自己的选项来处理此问题：http://jsfiddle.net/wq7eavq4/6/

chart: {
   events: {
        load: function () {
            var selected = this.options.rangeSelector.selectedAfter,
                undefined;

            if (selected !== undefined) this.rangeSelector.clickButton(selected, true); //set when defined
        }
    }
},
rangeSelector: {
    selectedAfter: 1 // custom param
},

唯一的缺点是缺少初始动画。

【讨论】：