Highcharts Chart Corrupted on Range Selector Butto

问题:

It appears that when changing the data grouping via the range selector buttons, the chart does not erase the old dataGroupings, so the chart becomes messy quickly. You can see the issue here.

Is there any way to fix this?

Below is the code that generates the chart.

Highcharts.stockChart('container', {

    chart: {
        height: 300
    },

    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]]]
            }
        }],
        buttonTheme: {
            width: 60
        },
        selected: 2
    },

    title: {
        text: 'AAPL Stock Price'
    },

    subtitle: {
        text: 'Custom data grouping tied to range selector'
    },

    _navigator: {
        enabled: false
    },

    series: [{
        name: 'AAPL',
        data: data,
        marker: {
            enabled: null, // auto
            radius: 3,
            lineWidth: 1,
            lineColor: '#FFFFFF'
        },
        tooltip: {
            valueDecimals: 2
        }
    }]
});