重建Highchart不起作用

Question

I'm trying to destroy and rebuild a Highcharts.stockChart like this:

Chart options:

$(document).ready(function () {
var label = [];
var seriesData = [];

columnChartOptions =  {
    exporting: {
        enabled: false
    },
    navigator: {
        enabled: false
    },
    scrollbar: {
        enabled: false
    },
    chart: {
        type: 'column'
    },
    credits: {
        href: " ",
        text: " "
    },
    title: {
        text: ''
    },
    yAxis: {
        min: 0,
        title: {
            text: 'kWh'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        shared: true,
        valueDecimals: 2
    },
    plotOptions: {
        column: {
            grouping: false,
            shadow: false,
            borderWidth: 0,
            groupPadding: 0,
            color: '#688DC4'
        }

    },
    rangeSelector: {
        allButtonsEnabled: true,
        verticalAlign: 'top',
        x: 0,
        y: 0,
        buttonPosition: {
            align: 'left',
            x: 0,
            y: 0
        },
        buttonTheme: {
            width: 50
        },
        selected: 2,
        buttonSpacing: 5,
        buttons: [{
            type: 'week',
            count: 1,
            text: 'Wocheeee',
            events: {
                click: function () {

                }
            }

        }, {
            type: 'month',
            count: 1,
            text: 'Monat',
            events: {
                click: function () {
                    myChart.destroy();
                    myChart = new Highcharts.StockChart('consumptionGraph', columnChartOptions);
                    myChart.showLoading("Wird geladen...");
                    setWeeklyData();
                }
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Jahr',
            events: {
                click: function () {
                    myChart.destroy();
                    myChart = new Highcharts.StockChart('consumptionGraph', columnChartOptions);
                    myChart.showLoading("Wird geladen...");
                    setMonthlyData();
                    myChart.redraw();
                }
            }
        }]
    },
    series: []
};    

initial create with monthly data:

myChart = new Highcharts.StockChart('consumptionGraph', columnChartOptions);
myChart.showLoading("Wird geladen...");
setMonthlyData();

function setMonthlyData() {
    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        url: '/Home/GetMonthlyConsumption',
        type: 'POST',
        cache: false,
        success: function (data) {
            var MonthlyConsumption = JSON.parse(data);

            for (var i = 0; i < MonthlyConsumption.length; i++) {
                seriesData.push(MonthlyConsumption[i].ActualValue);
                label.push(MonthlyConsumption[i].NameOfDate);
            }

            myChart.xAxis[0].update({ categories: label }, true);

            while (myChart.series.length > 0) {
                myChart.series[0].remove(true);
            }
            console.log(myChart.series.length);

            myChart.addSeries({
                name: 'Verbrauch (kWh)',
                color: '#688DC4',
                data: seriesData,
                animation: {
                    duration: 1000,
                    easing: 'easeOutBounce',
                },
            }, true);
            myChart.hideLoading();
        },
        error: function (error) {

            console.log(error);
            //monthlyColumnChart.showLoading(error.statusText);
        }
    });
}

After clicking the rangebutton for Year, I'm expecting a fully new build Chart but instead the new Series and xAxis value which should be changed is added to the existing chart.

Strange result:

added instead of building new

Answer 1

I solved the problem above by using the dataGrouping option of buttons and series like you can see here:

var seriesData = [];
Highcharts.setOptions({
    lang: {
        rangeSelectorFrom: "Von",
        rangeSelectorTo: "Bis",
        months: ["Jannuar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
        weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
        shortMonths: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        rangeSelectorZoom: '',
        decimalPoint: "."
    }
});

columnChartOptions =  {
    exporting: {
        enabled: false
    },
    navigator: {
        enabled: false
    },
    scrollbar: {
        enabled: false
    },
    chart: {
        type: 'column'
    },
    credits: {
        href: " ",
        text: " "
    },
    title: {
        text: ''
    },
    yAxis: {
        min: 0,
        title: {
            text: 'kWh'
        },
        lineWidth: 1,
        opposite: false
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%B',
            week: '%e. %b',
            day: '%e. %b',
            hour: '%H'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        shared: true,
        valueDecimals: 2
    },
    plotOptions: {
        series: {
            marker: {
                enabled: true
            }
        },
        column: {
            grouping: false,
            shadow: false,
            borderWidth: 0,
            groupPadding: 0,
            color: '#688DC4'
        }

    },
    rangeSelector: {
        inputDateFormat: '%d.%m.%Y',
        inputEditDateFormat: '%d.%m.%Y',
        inputEnabled: true,
        inputDateParser: function (value) {
            value = value.split(/[\.]/);
            return Date.UTC(
                value[2],
                value[1]-1,
                value[0]
            );
        },
        verticalAlign: 'top',
        x: 0,
        y: 0,
        buttonPosition: {
            align: 'left',
            x: 0,
            y: 0
        },
        buttonTheme: {
            width: 50
        },
        allButtonsEnabled: true,
        selected: 3,
        buttonSpacing: 5,
        buttons: [{
            type: 'day',
            count: 1,
            text: 'Tag',
            dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['hour', [1]]]
            }
        }, {
            type: 'week',
            count: 1,
            text: 'Woche',
            dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['day', [1]]]
            }
        }, {
            type: 'month',
            count: 1,
            text: 'Monat',
            dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['week', [1]]]
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Jahr',
            dataGrouping: {
                approximation: "sum",
                enabled: true,
                forced: true,
                units: [['month', [1]]]
            }
        }]
    },
    series: []
};

myChart = new Highcharts.StockChart('consumptionGraph', columnChartOptions);




myChart.showLoading("Wird geladen...");
setChartData();

function setChartData() {

            var consumerSeries = [
                [Date.UTC(2018, 1, 1), 150], [Date.UTC(2018, 1, 11), 180], [Date.UTC(2018, 1, 12), 199],
                [Date.UTC(2018, 7, 1), 150], [Date.UTC(2018, 7, 2), 130], [Date.UTC(2018, 7, 5), 280],
                [Date.UTC(2018, 9, 1), 150], [Date.UTC(2018, 9, 2), 130], [Date.UTC(2018, 9, 5), 190],
                [Date.UTC(2018, 12, 1), 150], [Date.UTC(2018, 12, 2), 130], [Date.UTC(2018, 12, 5), 250], 
            ];

            consumerSeriesObject = {
                name: "Consumption",
                data: consumerSeries,
                showInNavigator: true,
                color: '#688DC4',
                dataGrouping: {
                    approximation: "sum",
                    enabled: true,
                    forced: true,
                    units: [['month', [1]]]
                }
            };

            myChart.addSeries(consumerSeriesObject, true);
            myChart.hideLoading();

}` 

JS Fiddle

Now I want to change the color of every column which includes a xAxis value over and equal to 200. (column 2+4 of my Example). Is there any way to do this?