javascript - Adjust Highcharts data grouping based on range selector - Stack Overflow

admin管理员组

文章数量:1310143

Depending on the value of the highcharts range selector, I would like to change the data grouping. In my column chart, if one week is selected, there should be 7 bars, if one day is selected, there should be 24 bars, if one month is selected, there should be a bar for each day of the month.

There doesnt seem to be any way to supply a function inside the highchart configs to acplish this, but I may be missing something.

My current plan was to handle a click event on the range selector to update the series data to contain the correct amount of points. But there may be a better way.

Thanks

Depending on the value of the highcharts range selector, I would like to change the data grouping. In my column chart, if one week is selected, there should be 7 bars, if one day is selected, there should be 24 bars, if one month is selected, there should be a bar for each day of the month.

There doesnt seem to be any way to supply a function inside the highchart configs to acplish this, but I may be missing something.

My current plan was to handle a click event on the range selector to update the series data to contain the correct amount of points. But there may be a better way.

Thanks

• javascript
• highcharts

Share Improve this question Follow edited Aug 29, 2014 at 18:53 Jugal Thakkar 13.5k44 gold badges6363 silver badges8181 bronze badges asked Aug 29, 2014 at 17:11 dezmandezman 19.4k1313 gold badges5757 silver badges9292 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

There certainly are a bunch of options available in highstock for data grouping.

The primary one that you should look at is units. Here you can specify what kind of groups are allowed.

Top this up with groupPixelWidth and you have what you need, this width defines how small can a point in your chart be, if the number of points on the chart goes higher, the width per point decreases, once it goes below this threshold highcharts would force grouping. Keep this large enough to force grouping of next level, given you want not more than ~30 points on the screen.

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

@jsFiddle

Instead of using events you can bine range selector buttons with data grouping. See: "Data grouping by buttons" in the API https://api.highcharts./highstock/rangeSelector.buttons

Example: https://jsfiddle/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]]]
            }
        }]
    },

We tried a Hack around this, where we used Highstock's (Splinechart) RangeSelector, Event and DataGrouping. On click of weekly rangeselectorButton we catch this event through setExtremes. Post catching the event approximate it to "sum". If you are using two series than iterate the object.

  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

本文标签： javascriptAdjust Highcharts data grouping based on range selectorStack Overflow