ループ上にオブジェクトを作成する方法

http://canvasjs.com/を使用して自分のウェブサイトのグラフを作成しています。 forループを使用して動的なdataPointsを作成したいと思います。 dataPointsは、canvasjs関数の変数を使用してグラフをプロットします。以下は私のサンプルデータと私のコードです。ループ上にオブジェクトを作成する方法

サンプル：

dataPoints: [ 
    { x: 10, y: 71 }, 
    { x: 20, y: 55}, 
    { x: 30, y: 50 }, 
    { x: 40, y: 65 }, 
    { x: 50, y: 95 }, 
    { x: 60, y: 68 }, 
    { x: 70, y: 28 }, 
    { x: 80, y: 34 }, 
    { x: 90, y: 14} 
    ] 
}

私の現在のコード このコードは、エラーをスローしません。私が画面上で見るのは白い部分だけです。すべての値が補正されます。私はデータポイントを構造化した方法を推測しています。助けてください。

DataPoints = []; 
for (year = 1; year <= years; year++){ 
    inflatedClosing = $('#lookup-table-preserved #row-' + year + ' .inflated-closing').text(); 
    if(year === years){ 
    DataPoints.push({x: year, y: inflatedClosing}); 
    } else { 
    DataPoints.push({x: year, y: inflatedClosing}); 
    } 
}

それはあなたがすべての情報を持つ実施例を与えるしているここでは、この

出典

2016-06-22 Devil Raily

あなたに何を期待し画面に表示されますか？新しい要素を作成したり、何かを記録したりすることはありません。 –

'DataPoints'配列がループの後に' console.log（DataPoints） 'を追加すると、あなたは何を期待していますか？問題がアレイが正しく作成されていないかどうか、またはそれ以降に何かが間違っているかどうかは、あなたの質問から明らかではありません。 – nnnnnn

'＃lookup-table-preserved'は'

'ですか？ '＃row-2001 .inflated-closing'テーブル行（' '）？ – fictus

答えて

次のようになります。

var DataPoints = [], years = 3; 
 

 
for (var year = 1; year <= years; year++){ 
 
    var inflatedClosing = parseInt($('#lookup-table-preserved #row-' + year + ' .inflated-closing').text(), 10); 
 
    DataPoints.push({x: year, y: inflatedClosing, label : year}); 
 

 
} 
 
//console.log(DataPoints); 
 
var chart = new CanvasJS.Chart("chartContainer", { 
 
    theme: "theme2",//theme1 
 
    title:{ 
 
    text: "Title"    
 
    }, 
 
    animationEnabled: true, 
 
    data: [    
 
    { 
 
     // Change type to "bar", "area", "spline", "pie",etc. 
 
     type: "line", 
 
     dataPoints: DataPoints 
 
    } 
 
    ] 
 
}); 
 
chart.render();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<div id="lookup-table-preserved"> 
 
<ul id="row-1"> 
 
    <li class="inflated-closing">50</li> 
 
</ul> 
 
<ul id="row-2"> 
 
    <li class="inflated-closing">100</li> 
 
</ul> 
 
<ul id="row-3"> 
 
    <li class="inflated-closing">200</li> 
 
</ul> 
 
</div> 
 
<div id="chartContainer" style="height: 300px; width: 100%; margin-top: 20px;"></div>

出典

2016-06-22 01:13:10

ループ上にオブジェクトを作成する方法

答えて

関連する問題