Question

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

似乎没有办法在highchart configs中提供一个函数来实现这一目标，但我可能会遗漏一些东西。

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

由于

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

Answer 2

我们尝试了围绕这个，我们使用Highstock（Splinechart）RangeSelector，事件和DataGrouping。点击每周rangeselectorButton，我们通过setExtremes捕获此事件。发布事件后，将其近似为“总和”。如果你使用两个系列而不是迭代对象。

  events: {
         setExtremes: function (e) {
             if (e.rangeSelectorButton != undefined) {
                 var triger = e.rangeSelectorButton;
                 if (triger.type == 'week') {
                     $.each(this.series, function (index, obj) {
                         obj.options.dataGrouping.units[0] = ['week', [1]];
                     });
                 } else if (triger.type == 'day') {
                     $.each(this.series, function (index, obj) {
                         obj.options.dataGrouping.units[0] = ['day', [1]];
                     });
                 }
             }
         }
     },

@ fiddle

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

2 个答案: