如何在Highcharts中動態設置新數據？

Question

我正在使用Gantt chart來創建數據可視化。我從增量的基礎上從ElasticSearch獲取一些數據，我需要將新數據分配給圖表。我怎樣才能做到這一點？

這裏是一個JsFiddle link在看。

這需要動態增加

數據格式

[{ 
    "name": "login-util-sample", 
    "pointRange": 0, 
    "borderRadius": 1, 
    "pointWidth": 15, 
    "data": [{ 
     "x": 1451865600000, 
     "x2": 1451865600000, 
     "y": 0, 
     "total_seconds": -1451865600000 
    }, { 
     "x": 1451952000000, 
     "x2": 1451952000000, 
     "y": 0, 
     "total_seconds": -1451952000000 
    }] 
}, { 
    "name": "SfdcObmReceiverCloudSvc", 
    "pointRange": 0, 
    "borderRadius": 1, 
    "pointWidth": 15, 
    "data": [{ 
     "x": 1451865600000, 
     "x2": 1451865600000, 
     "y": 1, 
     "total_seconds": -1451865600000 
    }, { 
     "x": 1451952000000, 
     "x2": 1451952000000, 
     "y": 1, 
     "total_seconds": -1451952000000 
    }] 
}, { 
    "name": "create-update-aff-cloud", 
    "pointRange": 0, 
    "borderRadius": 1, 
    "pointWidth": 15, 
    "data": [{ 
     "x": 1451865600000, 
     "x2": 1451865602000, 
     "y": 3, 
     "total_seconds": -1451865598000 
    }, { 
     "x": 1451952000000, 
     "x2": 1451952017000, 
     "y": 3, 
     "total_seconds": -1451951983000 
    }] 
}] 

圖表選項，

{ 
    chart: { 
     type: 'xrange', 
     renderTo: 'chart', 
     height: 600, 
     zoomType: 'xy', 
     resetZoomButton: { 
      theme: { 
       fill: 'white', 
       stroke: 'silver', 
       r: 0, 
       states: { 
        hover: { 
         fill: '#41739D', 
         style: { 
          color: 'white' 
         } 
        } 
       } 
      } 
     }, 
     events: { 
      load: function(e) { 
       var max = maxDate; 
       var range = (24 * 3600 * 1000) * 7; // one day * 7 
       this.xAxis[0].setExtremes(max - range, max); 
       //resetMin = (max - range); 
       //resetMax = max; 
      }, 
      selection: function(event) { 
       if (event.xAxis) { 
        console.log('min: ' + event.xAxis[0].min + ', max: ' + event.xAxis[0].max); 
       } else { 
        console.log('Selection reset'); 
        this.xAxis[0].setExtremes(resetMin, resetMax); 
        is1stZoom = true; 
        console.log('Reset to min: ' + resetMin + ', max: ' + resetMax); 
       } 
      }, 
      redraw: function() { 
       var chart = this, 
        each = Highcharts.each; 

       each(chart.series, function(s, i) { 
        each(s.points, function(p, j) { 
         if (p.graphic) { 
          p.graphic.css({ 
           'stroke-width': 1, 
           'stroke': p.color 
          }) 
         } 
        }); 
       }); 
      } 
     } 
    }, 
    title: { 
     text: 'Processes Run' 
    }, 
    xAxis: { 
     type: 'datetime', 
     tickInterval: xAxisStepping, 
     dateTimeLabelFormats: { 
      month: '%b %e, %Y' 
     }, 
     min: minDate, 
     max: maxDate, 
     minRange: 1000, 
     events: { 
      afterSetExtremes: function(e) { 
       if (is1stZoom) { 
        resetMin = e.min; 
        resetMax = e.max; 
        is1stZoom = false; 
        console.log('Should get reset to min: ' + e.min + ', max: ' + e.max); 
       } 
      } 
     } 
    }, 
    yAxis: { 
     startOnTick: false, 
     endOnTick: false, 
     tickInterval: 1, 
     gridLineWidth: 1, 
     title: '', 
     categories: categories, 
     min: minY, 
     max: maxY, 
     labels: { 
      enabled: false 
     } 
    }, 
    navigator: { 
     enabled: true, 
     margin: 2 
    }, 
    series: data, 
    tooltip: { 
     formatter: function() { 
      var seriesName = this.series.name; 
      return seriesName; 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    exporting: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      cursor: 'pointer', 
      animation: false, 
      turboThreshold: 100000000, 
      dataGrouping: { 
       enabled: false 
      } 
     } 
    } 
} 

上按一下按鈕我做這樣的事情的下方，這說Cannot read property '0' of undefined

$('#button').click(function() { 
    for (var i = 0; i < newData.length; i++) { 
     chart.series[i].setData(item); 
    }; 
}); 

Answer 1

你必須改變單擊處理程序如下：

$('#button').click(function() { 
    for (var i=0;i<newData.length;i++) {      
    chart.highcharts().addSeries(newData[i], true); 
    }; 
}); 

正在使用jQuery的風格初始化時，返回的對象僅僅是DOM的元素，其中插入圖表的jQuery的對象。要獲得代表該圖表的Highcharts-Object，您必須再次在該對象上調用highcharts。

見我的jsfiddle：http://jsfiddle.net/doc_snyder/20kt84vo/9/

另外，您可以用替代語法var chart = new Highcharts.chart，你必須提供包含DOM的元素在renderTo配置選項取代了jQuery風格的初始化。

http://jsfiddle.net/doc_snyder/da2cvc5j/參見