使用rails partial动态创建多个NVD3图表 [英] Dynamic creation of Multiple NVD3 charts with rails partial
问题描述
我有一个页面，我试图在选项卡上显示多个NVD3图表。我在NVD3网站上看到他们提前存储所有图表名称，但我不知道我该怎么做。
我有图形模型存储在数据库，然后我的页面必须动态地呈现所有的图表和适当的JavaScript的飞。到目前为止，只有最后的图构造显示：（
我为每个图渲染这个部分
<％if graph.present？％>
<％@ graph = graph％>
<％end％>
<％if @ graph.data.empty？％>
<％= render'graphs / no_graph'％>
<％else％>
< =text / javascript>
$（document）.ready（function（）{
var data = $（'＃chart_<％= @ graph.id％>'）。data 'data'）;
reloadGraph（data）;
$（'a [data-toggle =tab]' e）{
reloadGraph（data）
}）
}）
function reloadGraph（data）{
nv.addGraph（function（）{
var chart = nv.models.multiBarChart（）;
chart.yAxis.axisLabel（'Monthly（kWh）'）;
d3.select（'＃chart_<％= @ graph.id％> svg'）。datum（data）.transition（）。duration（500）.call（chart）;
nv.utils.windowResize（chart.update）;
返回图表;
}）;
}
< / script>
<％= content_tag：div，id：chart _＃{@ graph.id}，class：'chart'，data：{data：graph.monthly_data} do％>
< svg>< / svg>
<％end％>
<％end％>
在NVD3网站上，他们开始：
var MainExample，ExampleOne，Example2
/ p>
然后在他们的构建调用中他们分配eg MainExample = chart
有关如何在rails中构建此结构的任何建议
确定，所以没有答案在这里回答，但基本上，你必须存储动态对象在数组
var charts = []
然后使用 each_with_index 循环图表，并使用索引引用
code> each_with_index 循环，它基本上每次渲染javascript一块，你渲染每个动态图的创建。
Mine看起来像这样（未经抛光但工作正常）
< script type =text / javascript
var graphs = []
var data = []
$（document）.ready（function（）{
/ *渲染条形图js * /
<％graphs.each_with_index do | graph，index |％>
data [<％= index％>] = $（'＃chart_<％= graph.id％> ）.data（'data'）;
nv.addGraph（function（）{
<％if graph.type ==BarGraph％>
var chart = nv.models.multiBarChart（）。margin（{left：80，bottom：30}）;
<％else％>
var chart = nv.models.lineChart {left：80，bottom：30}）;
chart.xAxis
.tickFormat（function（d）{return d3.time.format（'％H：％M'）（new Date ））;}）
<％end％>
chart.yAxis
.axisLabel（'kVA'）
d3.select '＃chart_<％= graph.id％> svg'）
.datum（data [<％= index％>]）
.transition（）
。 ）
.call（chart）;
nv.utils.windowResize（chart.update）;
graphs [<％= index％>] = chart
return chart;
}）;
<％end％>
$（'a [data-toggle =tab]'）。on（'shown'，function（e）{
$ .each ）{
graph.update（）
}）
}）
}）
< / script>
< div class =row-fluid>
< div class =span12>
< ul class =nav nav-tabsid =graph_tabs>
<％graphs.each_with_index do | graph，index |％>
< li<％= index = 0？ class = active：''％>>
< a href =＃graph_tab_<％= graph.id％> data-toggle =tab>
<％= graph.description％>
< / a>
< / li>
<％end％>
< / ul>
< div class =tab-content>
<％graphs.each_with_index do | graph，index |％>
< div id ='graph_tab_<％= graph.id％>'class =tab-pane fade<％= index == 0？active in：''％>&
<％= rendergraphs /＃{graph.type.downcase}，graph：graph％>
< / div>
<％end％>
< / div>
< / div>
< / div>
最后的有趣的位是一个非常方便的技巧，使用引导标签，否则它们无法正确呈现。
I have a page which I am trying to show multiple NVD3 charts on tabs. I see on the NVD3 site that they store all chart names ahead of time but I am not sure how I should do this.
I have graph models which get stored in the database and then my page must dynamically render all of the charts and appropriate javascript on the fly. So far only the last graph constructed shows :(
I render this partial for each graph
<%if graph.present?%>
<%@graph = graph%>
<%end%>
<%if @graph.data.empty?%>
<%= render 'graphs/no_graph'%>
<%else%>
<script type="text/javascript">
$(document).ready(function() {
var data = $('#chart_<%=@graph.id%>').data('data');
reloadGraph(data);
$('a[data-toggle="tab"]').on('shown', function(e) {
reloadGraph(data)
})
})
function reloadGraph(data) {
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.yAxis.axisLabel('Monthly (kWh)');
d3.select('#chart_<%=@graph.id%> svg').datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
</script>
<%=content_tag :div, id: "chart_#{@graph.id}",class: 'chart', data: {data: graph.monthly_data} do%>
<svg></svg>
<%end%>
<%end%>
On the NVD3 site they start off with:
var MainExample, ExampleOne, Example2
etc.
Then in their constuction call they assign e.g. MainExample = chart
Any advice on how I should structure this in rails??
Ok so there were no takers on answering here but basically it turns out that you have to store the dynamic objects in an array like
var charts = []
Then loop through the charts with a each_with_index and use the index to reference the various charts
in your each_with_index loop which is essentially rendering out the javascript a piece at a time, you render out the creation of each dynamic graph.
Mine looked like this (un-polished but working fine)
<script type="text/javascript">
var graphs = []
var data = []
$(document).ready(function(){
/*Render out the bargraphs js*/
<%graphs.each_with_index do |graph, index|%>
data[<%=index%>] = $('#chart_<%= graph.id%>').data('data');
nv.addGraph(function() {
<%if graph.type == "BarGraph"%>
var chart = nv.models.multiBarChart().margin({left: 80, bottom: 30});
<%else%>
var chart = nv.models.lineChart().margin({left: 80, bottom: 30});
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%H:%M')(new Date(d)); })
<%end%>
chart.yAxis
.axisLabel('kVA')
d3.select('#chart_<%= graph.id%> svg')
.datum(data[<%=index%>])
.transition()
.duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
graphs[<%=index%>] = chart
return chart;
});
<%end%>
$('a[data-toggle="tab"]').on('shown', function(e) {
$.each(graphs, function(index, graph){
graph.update()
})
})
})
</script>
<div class="row-fluid">
<div class="span12">
<ul class="nav nav-tabs" id="graph_tabs">
<%graphs.each_with_index do |graph, index|%>
<li <%= index == 0 ? "class=active" : ''%>>
<a href="#graph_tab_<%= graph.id%>" data-toggle="tab">
<%= graph.description%>
</a>
</li>
<%end%>
</ul>
<div class="tab-content">
<%graphs.each_with_index do |graph, index|%>
<div id='graph_tab_<%=graph.id%>' class="tab-pane fade <%= index == 0 ? "active in" : ''%>">
<%=render "graphs/#{graph.type.downcase}", graph:graph%>
</div>
<%end%>
</div>
</div>
</div>
The funny bit at the end is a very handy trick to get the graphs to re render when you are using bootstrap tabs otherwise they don't render properly.
这篇关于使用rails partial动态创建多个NVD3图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
