2016-08-05 6 views
1

ボタンをクリックすると、図表にポイントが追加され、図表(図表はhttp://www.highcharts.com/demo/dynamic-updateの改訂版です)全体を再描画せずにWebページにボタンを追加しようと考えています。しかし、私の現在のコードは動作していません。ここでハイチャート:ボタンをクリックしてダイナミックチャートを更新する方法は?

が問題のコードです: highcharts.js::キャッチされない例外TypeError:私はクロームでそれを実行しようとすると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; 
          }())) 
          }] 
         }); 
        }); 
       }); 

、私は次のようなエラー報告を得た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関数で何をしようとしているのかわかりませんが、そのコードをすべて削除してクリックイベントでグラフを定義すると、が何であるかを知るように[3,3]が追加されます。

シリーズ宣言:

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

そして、クリック機能(noグラフのコードの後に​​移動):

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

ライブdemo

+0

ありがとう、私はちょうど私がものを複雑にしたことに気付きました。 – Aqqqq

関連する問題