2016-11-22 3 views
0

グラフにデータを表示したい。サイズはスタックされた値である約200kデータポイントx16です。私は、このライブラリが時間内にこれらのデータをレンダリングできることを願っています。CanvasJs、更新データ

[16] [250000]のようになります。外側の配列は積み重ねられた値で、内部はデータを保持します。 [n] [m] = {x:1 ... 250000、y:0 ... 1}。 [1] [7000] = {x:7000、y:data}または[12] [7000] = {7000、y:otherData} - >これは積み重ねられます。

データは、ユーザー対話の後にのみロードされます。

私の問題は、グラフをデータで埋めることができなくなったことです。私はhttp://canvasjs.com/docs/charts/basics-of-creating-html5-chart/updating-chart-options/を見ました。

コード:

<script type="text/javascript"> 
    dataPoints = []; //or: dataPoints ={}; 
    window.onload = function() { 
     chart = new CanvasJS.Chart("chart", 
       { 
        title: { 
         text: "asdf" 
        }, 
        data: [{ 
         type: "stackedColumn", 
         dataPoints: dataPoints 
        }] 
       }); 

     chart.render(); 
    } 
    function update(data) { 
     //or: dataPoints=[[],[]]; 
     var size= data[0].length; 
     var outer= data.length; 
     for (i= 0; i< outer; i++) { 
      for (j= 0; j< size; j++) {     
       dataPoints[i][j].push({y: data[i][j].y}); //here is the error 
       console.log(data[i][j].y); 
      } 

     } 
    chart.render(); 
    } 

どんなに私はそれを行う方法、私は " "未定義" は、のX/Y/0のプロパティを設定することはできません" を取得します。

私はそれが配列の初期化と関係があり、さまざまな方法で試したことが分かっていましたが、後でデータを書き込むために正しく初期化する方法がわかりません(どのくらいのデータが来るのかわかりません)。 (0,0)に問題があってから「(1,0)に行く」

ロードされたデータをどのように減らすことができますか?いくつかのテストを行うと極端に遅くなり、後で1.000.000 x 16データポイント(http://canvasjs.com/docs/charts/chart-options/range-changing/と表示され、> 2.000.000でクラッシュする)が発生する可能性があります。特に、同期、ズーム、パンなどのインタラクションの場合。

答えて

2

データは、オブジェクトの形式でなければならないdataSeriesの配列を含むべきである。 このdataSeriesは再びオブジェクトの形式でなければならないdataPointsのを含むべきである。

var myData = []; 
function update() { 
    var size= data[0].length; 
    var outer= data.length; 
    for (i= 0; i< outer; i++) { 
     var dataSeries = []; 
     for (j= 0; j< size; j++) { 
      dataSeries.push({y: data[i][j]}); 
     } 
     myData.push({type: "stackedColumn", dataPoints: dataSeries}); 
    } 
    chart.render(); 
} 

このラインにこの

data: myData 

data: [{ 
    type: "stackedColumn", 
    dataPoints: dataPoints 
}] 

を交換し、ユーザが対話した後、更新()関数を呼び出します。