2016-08-05 119 views
1

我打算在我的網頁上有一個按鈕,以便點擊一個按鈕後,一個點將被添加到圖表而不會重新繪製整個圖表(圖表是這個http://www.highcharts.com/demo/dynamic-update的修改版本)。但是,我目前的代碼不起作用。Highchart:如何通過點擊按鈕來更新動態圖表?

這裏是關注代碼:http://jsfiddle.net/wtvaz9gc/7/

var series; 

$(function drawCharts(numberOfPoint) { 
        // if(typeof chartData == undefined){ 
        // chartData = $(dataStore.getXml()); 
        // } 

        $("#b").click(function(){ 
      series.addPoint([3,3]); 
       }) 
        $(document).ready(function() { 
         Highcharts.setOptions({ 
          global: { 
           useUTC: false 
          } 
         }); 

         $('#container').highcharts({ 
          chart: { 
           type: 'line', 
           animation: Highcharts.svg, // don't animate in old IE 
           marginRight: 10, 
           events: { 
            load: function() { 
             series = this.series[0]; 
             // window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y; 
             // console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y); 
            }, 
           } 
          }, 
          title: { 
           text: '' 
          }, 
          xAxis: { 
           title: { 
            text: 'Jahre' 
           }, 
          // gridLineWidth: 0, 
          // lineWidth:1, 
           startOnTick: true, 
           tickPixelInterval: 40, 
           min: 0, 
           max: 10, 
           plotLines: [{ 
            value: 0, 
            width: 1, 
            color: '#808080' 
           }] 
          }, 

          yAxis: { 
           title: { 
            text: 'Vermögen(in EUR)' 
           }, 
           labels: { 
            enabled: true 
           }, 
           min: 0, 
           max: 100, 
           plotLines: [{ 
            value: 0, 
            width: 1, 
            color: '#808080' 
           }] 
          }, 
          tooltip: { 
           enabled : false, 
           formatter: function() { 
            return '<b>' + this.series.name + '</b><br/>' + 
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
            Highcharts.numberFormat(this.y, 2); 
           } 
          }, 
          legend: { 
           enabled: false 
          }, 
          exporting: { 
           enabled: false 
          }, 
          series: [{ 
           name: 'Random data', 
           data: ($(function() { 
           // generate an array of random data 
           var data = [], 
           time = (new Date()).getTime(), 
           i, preValue; 

           for (i = 0; i < numberOfPoint; i += 1) { 
            if(i == 0){ 
             data.push({ 
              x: i, 
              y: 10 
             }); 
            } else { 
             data.push({ 
              x: i, 
              y: chartData["wealth"][0][i] 
             }); 
            } 
           } 
           // showMsg(data); 
           // console.log(data); 
           return data; 
          }())) 
          }] 
         }); 
        }); 
       }); 

當我試圖在Chrome運行它,我得到了以下錯誤報告: highcharts.js:遺漏的類型錯誤:i.splice不是一個函數 addPoint @ highcharts.js:...

在這種情況下,我應該如何使用函數「addPoint」? 還是應該用其他方法達到目的?

+0

檢查您的控制檯有一些錯誤:的ReferenceError:未定義chartData –

+0

對不起,我會解決這個問題。 – Aqqqq

+0

告訴我們,當你這樣做。 – vaso123

回答

0

也有一些是錯誤的函數生成的初始數據,但addPoint工作正常:

var series; 
 

 
$(function drawCharts(numberOfPoint) { 
 
\t \t \t \t \t \t // if(typeof chartData == undefined){ 
 
\t \t \t \t \t \t // \t chartData = $(dataStore.getXml()); 
 
\t \t \t \t \t \t // } 
 

 
\t \t \t \t \t \t $("#b").click(function(){ 
 
       series.addPoint([10,10]); 
 
       
 
    \t \t \t \t \t }) 
 
\t \t \t \t \t \t $(document).ready(function() { 
 
\t \t \t \t \t \t \t Highcharts.setOptions({ 
 
\t \t \t \t \t \t \t \t global: { 
 
\t \t \t \t \t \t \t \t \t useUTC: false 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }); 
 

 
\t \t \t \t \t \t \t $('#container').highcharts({ 
 
\t \t \t \t \t \t \t \t chart: { 
 
\t \t \t \t \t \t \t \t \t type: 'line', 
 
\t \t    \t \t \t \t animation: Highcharts.svg, // don't animate in old IE 
 
\t \t    \t \t \t \t marginRight: 10, 
 
\t \t    \t \t \t \t events: { 
 
\t \t    \t \t \t \t \t load: function() { 
 
\t \t    \t \t \t \t \t \t series = this.series[0]; 
 
\t \t     \t \t \t \t \t // window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y; 
 
\t \t     \t \t \t \t \t // console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y); 
 
\t \t     \t \t \t \t }, 
 
\t \t     \t \t \t } 
 
\t \t     \t \t }, 
 
\t \t     \t \t title: { 
 
\t \t     \t \t \t text: '' 
 
\t \t     \t \t }, 
 
\t \t     \t \t xAxis: { 
 
\t \t     \t \t \t title: { 
 
      \t \t \t \t \t \t  text: 'Jahre' 
 
     \t \t \t \t \t \t  }, 
 
     \t \t \t \t \t \t // gridLineWidth: 0, 
 
     \t \t \t \t \t \t // lineWidth:1, 
 
\t \t     \t \t \t startOnTick: true, 
 
\t \t     \t \t \t tickPixelInterval: 40, 
 
\t \t     \t \t \t min: 0, 
 
\t \t     \t \t \t max: 10, 
 
\t     \t \t \t \t plotLines: [{ 
 
\t \t     \t \t \t \t value: 0, 
 
\t \t     \t \t \t \t width: 1, 
 
\t \t     \t \t \t \t color: '#808080' 
 
\t \t     \t \t \t }] 
 
\t \t     \t \t }, 
 

 
\t \t     \t \t yAxis: { 
 
\t \t     \t \t \t title: { 
 
\t \t     \t \t \t \t text: 'Vermögen(in EUR)' 
 
\t \t     \t \t \t }, 
 
\t \t     \t \t \t labels: { 
 
     \t \t \t \t \t \t \t \t \t enabled: true 
 
    \t \t \t \t \t \t \t \t \t }, 
 
\t \t     \t \t \t min: 0, 
 
\t \t     \t \t \t max: 100, 
 
\t \t     \t \t \t plotLines: [{ 
 
\t \t     \t \t \t \t value: 0, 
 
\t \t     \t \t \t \t width: 1, 
 
\t \t     \t \t \t \t color: '#808080' 
 
\t \t     \t \t \t }] 
 
\t \t     \t \t }, 
 
\t \t     \t \t tooltip: { 
 
\t \t     \t \t \t enabled : false, 
 
\t \t     \t \t \t formatter: function() { 
 
\t \t     \t \t \t \t return '<b>' + this.series.name + '</b><br/>' + 
 
\t \t     \t \t \t \t Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
 
\t \t     \t \t \t \t Highcharts.numberFormat(this.y, 2); 
 
\t \t     \t \t \t } 
 
\t \t     \t \t }, 
 
\t \t     \t \t legend: { 
 
\t \t     \t \t \t enabled: false 
 
\t \t     \t \t }, 
 
\t \t     \t \t exporting: { 
 
\t \t     \t \t \t enabled: false 
 
\t \t     \t \t }, 
 
\t \t     \t \t series: [{ 
 
\t \t     \t \t \t name: 'Random data', 
 
\t \t     \t \t \t data: [1,2,3] 
 
\t \t     \t \t }] 
 
\t \t     \t }); 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
 

 
\t \t \t <button id="b" href="#" >AddPoints</button>

+0

非常感謝,我只是意識到我過於複雜的東西。 – Aqqqq

0

我不知道你正在嘗試在series.data功能做的,但消除所有的代碼和定義在點擊事件圖表,所以它知道什麼series是確實增加點[3,3]

現在系列聲明:

series: [{ 
    name: 'Random data', 
    data: [] 
    }] 

而且點擊功能(圖表代碼之後沒有移動):

$("#b").click(function() { 
    var chart = $('#container').highcharts(); 
    chart.series[0].addPoint([3, 3]); 
    }) 

直播demo

+0

非常感謝,我只是意識到我過於複雜的東西。 – Aqqqq

相關問題