首页 文章

Highcharts：更改选项后重绘图表

提问于
浏览 次
0

仅更改选项后是否可以重绘图表？

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
                }
            },


        };

你可能会注意到我在plotOptions中控制系列，因为在同一个图表上会有多个系列 .

// 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 )

然后我用jquery来改变一些选项值：

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

这什么都不做 . 当我用'new Highcharts.stockChart（options）'替换图表重绘时，它将正常工作，并使用适当的选项重新创建图表 . 但我不认为这是正确的方法，因为所有选项都被重置，特别是当数据系列随后被添加到图表时，这很烦人 .

那么如何正确触发redraw（）以便它将使用新的选项值更新图表？

javascript jquery highcharts

1 回答

  • 2

    因此，似乎有两种方法可以更新您在屏幕中看到的内容：

    更新图表信息的简单图表更新，例如：

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

    和系列更新，它更新数据本身，但保留您已有的数据，这样您就不必重新创建图表实例：

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

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

    通过使用其中之一或两者，应该能够获得任何期望的结果 .

    回复于

相关问题