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

wbrvyc0a  于 2023-01-02  发布在  Highcharts
关注(0)|答案(3)|浏览(198)

根据highcharts范围选择器的值,我想要更改数据分组。在我的柱形图中,如果选择一周,应该有7个条形,如果选择一天,应该有24个条形,如果选择一个月,该月的每一天都应该有一个条形。
似乎没有任何方法可以在highchart配置中提供一个函数来完成这一任务,但我可能遗漏了一些东西。
我目前的计划是处理范围选择器上的单击事件,以更新序列数据,使其包含正确的点数,但可能有更好的方法。
谢啦,谢啦

4nkexdtk

4nkexdtk1#

当然,highstock中有很多数据分组选项。
您应该查看的主要组是units,在这里您可以指定允许的组类型。
加上groupPixelWidth,你就得到了你需要的,这个宽度定义了你图表中的一个点可以有多小,如果图表上的点数增加,每个点的宽度会减少,一旦它低于这个阈值,highcharts会强制分组。保持这个足够大,以强制下一个级别的分组,假设你不想在屏幕上超过~30个点。

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

@jsFiddle

yvgpqqbh

yvgpqqbh2#

我们尝试了一个黑客围绕这一点,在那里我们使用Highstock的(Splinechart)范围选择器,事件和数据分组.点击每周范围选择器按钮,我们通过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

eufgjt7s

eufgjt7s3#

您可以将范围选择器按钮与数据分组结合使用,而不使用事件。请参阅:API https://api.highcharts.com/highstock/rangeSelector.buttons中的“按按钮分组数据”
示例:https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/rangeselector/datagrouping/

rangeSelector: {
        allButtonsEnabled: true,
        buttons: [{
            type: 'month',
            count: 3,
            text: 'Day',
            dataGrouping: {
                forced: true,
                units: [['day', [1]]]
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Week',
            dataGrouping: {
                forced: true,
                units: [['week', [1]]]
            }
        }, {
            type: 'all',
            text: 'Month',
            dataGrouping: {
                forced: true,
                units: [['month', [1]]]
            }
        }]
    },

相关问题