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

これをレールでどのように構築するべきかについてのアドバイスはありますか??

4

1 に答える 1