RailsインスタンスのjQueryチャートで動作するように各ループを作成することはできません

Question

こんにちは、私はプレーヤー名とそのお金を表示しようとしています。私は各ループを作成する必要があることを知っているが、私はそれを動作させることができない、あなたが私を助けることができますか？最初の行{y： "<％= result.FTAG％>"、ラベル： "<％= result.HomeTeam％>"}は機能しませんが、2番目の行は機能しますが、ループで。それを修正するには？

<div id="chartContainer" style="height: 370px; width: 100%;"></div> 
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
</form> 

<% @results.each do |result| %> 
<script> 
window.onload = function() { 

var chart = new CanvasJS.Chart("chartContainer", { 
    animationEnabled: true, 
    theme: "light2", // "light1", "light2", "dark1", "dark2" 
    title:{ 
    text: "Top Oil Reserves" 
    }, 
    axisY: { 
    title: "Reserves(MMbbl)" 
    }, 
    data: [{   
    type: "column", 
    showInLegend: true, 
    legendMarkerColor: "grey", 
    legendText: "MMbbl = one million barrels", 
    dataPoints: [  
     { y: "<%= result.FTAG %>", label: "<%= result.HomeTeam %>" }, 
     { y: 266455, label: "<%= @player %>" }, 
     { y: 169709, label: "<%= @player %>" }, 
     { y: 158400, label: "<%= @player %>" }, 
     { y: 142503, label: "<%= @player %>" }, 
     { y: 101500, label: "Kuwait" }, 
     { y: 97800, label: "UAE" }, 
     { y: 80000, label: "Russia" } 
    ] 
    }] 
}); 
chart.render(); 

} 
</script> <% end %> 

Answer 1

@プレイヤーを正しく設定していないようです。コントローラを見ることなく、私は確かに言うことはできませんが、私はあなたが@playerではなくresult.HomeTeam.playersを望んでいると推測しています。

Answer 2

ループの繰り返しごとに新しいチャートを作成して設定してから、それをすべて放棄します。レンダリングされたHTMLソースを見ると、@resultsというエントリがあるので、多くのwindow.onload() { ....}コールが表示されます。

実際には、配列@resultsをループして内部データポイントのペイロードを構築したいだけです。これはチャート構築関数に一度だけ渡します。このような

何か：

<script> 
var datapoints = []; 
<% @results.each do |result| %> 
    datapoints.push({y: "<%= result.FTAG %>", label: "<%= result.HomeTeam %>"}); 
<% end %> 
</script> 

<script> 
window.onload = function() { 

var chart = new CanvasJS.Chart("chartContainer", { 
    animationEnabled: true, 
    theme: "light2", // "light1", "light2", "dark1", "dark2" 
    title:{ 
    text: "Top Oil Reserves" 
    }, 
    axisY: { 
    title: "Reserves(MMbbl)" 
    }, 
    data: [{   
    type: "column", 
    showInLegend: true, 
    legendMarkerColor: "grey", 
    legendText: "MMbbl = one million barrels", 
    dataPoints: datapoints 
    }] 
}); 
chart.render(); 

} 
</script>