高图：更改选项后重绘图表

Question

Is it possible to redraw chart after changing options only ?

 let options = {
            chart        : {
                renderTo: 'container',
                type    : 'line'
            },
            rangeSelector: {
                selected: 1
            },

            yAxis: {
                title: {
                    text: 'Number of downloads'
                }
            },

            xAxis: {
                type: 'datetime'
            },

            title: {
                text: 'Title'
            },


            series: undefined,

            plotOptions: {
                series: {
                    compare        : undefined,
                    showInNavigator: true
                }
            },


        };

You may notice that I control series in plotOptions as there will be multiples series on same chart.

// Data needs some preparation so I inject it separately, here:
options.series = seriesOptions( preparedData )

// This correctly plots the chart
let chart = new Highcharts.stockChart( options )

Then I use jquery to change some options values:

 $( '#setWeekly' ).on( 'click', function( e ) {
            options.plotOptions.series.dataGrouping = {
                forced: true,
                units : [
                    [ 'week', [ 1 ] ]
                ]
            }
            options.title.text = "New title"
            chart.isDirty = true
            chart.redraw()
        } );

This does nothing. When I replace the chart redraw by a 'new Highcharts.stockChart( options )' it will work and correctly recreate the chart with proper options. But I don't think this is the proper way in particular because all the options are reset, which is annoying in particular when data series were subsequently added to the chart.

So how to properly trigger redraw() so it will update the chart with the new options values ?

Answer 1

So it seems there are 2 ways of updating what you see in screen:

simple chart update which update the chart information such as:

  chart.update(
                {
                    title: {
                        text: 'new text'
                    }
                }
            )

and the series update, which update the data itself, but keep the data you already have so you are not forced to recreate a chart instance:

 let seriesMonth = {
                dataGrouping: {
                    forced: true,
                    units : [ [ 'month', [ 1 ] ] ]
                }
            }

 chart.series[ 0 ].update( seriesMonth );

By using either one or both, one should be able to get any desired result.