2016-12-07 96 views
0

是否可以在更改選項後重新繪製圖表?Highcharts:更改選項後重新繪製圖表

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() 
     }); 

這什麼都不做。當我用'新的Highcharts.stockChart(選項)'替換圖表重繪時,它會工作並正確地重新創建具有適當選項的圖表。但我並不認爲這是正確的方法,因爲所有選項都已重置,特別是當數據系列隨後添加到圖表時,這特別令人討厭。

那麼如何正確地觸發重繪(),以便它將使用新的選項值更新圖表?

+1

看看'chart.update'(http://api.highcharts.com/highcharts/Chart.update)。 – wergeld

+0

你可以創建這個小提琴嗎? –

回答

1

因此,似乎有更新的2種方式你在屏幕上看到:

簡單的圖表更新,其中更新圖表信息,如:

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

和一系列更新,它更新數據本身,而是讓你已經有了這樣你就不會被迫重新建立一個圖表實例的數據:

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

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

通過使用一個或兩個,一個應該能夠得到任何預期的結果。