javascript - 根据范围选择器调整 Highcharts 数据分组

Question

根据 highcharts 范围选择器的值，我想更改数据分组。在我的柱形图中，如果选择一周，应该有 7 个柱，如果选择一天，应该有 24 个柱，如果选择一个月，每个月的每一天都应该有一个柱。

似乎没有任何方法可以在 highchart 配置中提供函数来完成此操作，但我可能遗漏了一些东西。

我目前的计划是处理范围选择器上的点击事件，以更新系列数据以包含正确数量的点。但可能有更好的方法。

谢谢

Answer 1

肯定有一堆options available in highstock for data grouping .

您应该查看的第一个是 units .您可以在此处指定允许的群组类型。

用 groupPixelWidth 加满你有你需要的东西，这个宽度定义了图表中的一个点可以有多小，如果图表上的点数增加，每个点的宽度就会减少，一旦它低于这个阈值，highcharts 就会强制分组。如果您不希望屏幕上超过 ~30 个点，请保持这个足够大以强制下一个级别的分组。

dataGrouping: {
    units: [
        ['hour', [1]],
        ['day', [1]],
        ['month', [1]],
        ['year', null]
    ],
    groupPixelWidth: 100
}

@jsFiddle