div出现在HTML中,javascript也出现在源代码中...任何想法为什么我仍然在页面上看不到任何内容?
注意:在控制台中手动运行js会导致图表呈现正常
查看:
<%= high_chart("some_id", @chart) %>
控制器:
@chart = LazyHighCharts::HighChart.new('graph') do |f|
f.title(:text => "Population vs GDP For 5 Big Countries [2009]")
f.xAxis(:categories => ["United States", "Japan", "China", "Germany", "France"])
f.series(:name => "GDP in Billions", :yAxis => 0, :data => [14119, 5068, 4985, 3339, 2656])
f.series(:name => "Population in Millions", :yAxis => 1, :data => [310, 127, 1340, 81, 65])
f.yAxis [
{:title => {:text => "GDP in Billions", :margin => 70} },
{:title => {:text => "Population in Millions"}, :opposite => true},
]
f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical',)
f.chart({:defaultSeriesType=>"column"})
end
页面视图中的结果:
<script type="text/javascript">
(function() {
var onload = window.onload;
window.onload = function(){
if (typeof onload == "function") onload();
var options = { "title": { "text": "Population vs GDP For 5 Big Countries [2009]" },"legend": { "align": "right","verticalAlign": "top","y": 75,"x": -50,"layout": "vertical" },"xAxis": { "categories": [ "United States","Japan","China","Germany","France" ] },"yAxis": [ { "title": { "text": "GDP in Billions","margin": 70 } },{ "title": { "text": "Population in Millions" },"opposite": true } ],"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": { } },"chart": { "defaultSeriesType": "column","renderTo": "some_id" },"subtitle": { },"series": [{ "name": "GDP in Billions","yAxis": 0,"data": [ 14119,5068,4985,3339,2656 ] },{ "name": "Population in Millions","yAxis": 1,"data": [ 310,127,1340,81,65 ] }] };
window.chart_some_id = new Highcharts.Chart(options);
};
})()
</script>
<div id="some_id"></div>