0

我有一个页面，我试图在选项卡上显示多个 NVD3 图表。我在 NVD3 网站上看到他们提前存储了所有图表名称，但我不确定我应该如何做到这一点。

我有存储在数据库中的图形模型，然后我的页面必须动态呈现所有图表和适当的 javascript。到目前为止，只有最后一个构建的图表显示:(

我为每个图渲染这个部分

<%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%>

在 NVD3 网站上，他们从以下内容开始：

var MainExample, ExampleOne, Example2

等等

然后在他们的施工电话中，他们分配例如MainExample = chart

关于我应该如何在rails中构建它的任何建议？

4

1 回答 1

1

好的，所以没有人在这里回答，但基本上事实证明你必须将动态对象存储在一个数组中，比如

var charts = []

然后用 a 循环遍历图表each_with_index并使用索引来引用各种图表

在您的each_with_index循环中，它本质上是一次渲染一段 javascript，您渲染出每个动态图的创建。

我的看起来像这样（未抛光但工作正常）

<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>

最后有趣的一点是一个非常方便的技巧，可以在您使用引导选项卡时重新渲染图形，否则它们无法正确渲染。

于 2013-07-04T20:24:39.717 回答