1

jQueryの切り替え可能なタブ内にJavaScriptチャートを表示しようとしています（Ruby on Railsとbootstrap-tab.jsを使用）。グラフがタブの外側にある場合は正常に表示されますが、タブの内側には表示されません。私は非常に単純なことを見落としていると確信していますが、私はこれに苦労しています。

私のビューコード：

 <ul class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#graph" data-toggle="tab">Graph</a></li>
 </ul>

 <div class="tab-content">
 <div class="tab-pane active" id="home">...</div>
 <div class="tab-pane" id="graph">
 <div id="chartdiv" style="width: 100%; height: 400px;"></div>
 </div>

Javascriptコード：

私はこれを試しました：

 <script type="text/javascript">
 $(function() {
 $ ('a#graph').click(function(){

        var chart;

        var chartData = [{
            country: "USA",
            visits: 4025
        }, {
            country: "Poland",
            visits: 328
        }];

        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "country";
            chart.startDuration = 1;

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.labelRotation = 90;
            categoryAxis.gridPosition = "start";

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.valueField = "visits";
            graph.balloonText = "[[category]]: [[value]]";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 0.8;
            chart.addGraph(graph);

            chart.write("chartdiv");
           });
         });
       });
    </script>

この：

    <script type="text/javascript">

        var chart;

        var chartData = [{
            country: "USA",
            visits: 4025
        }, {
            country: "Poland",
            visits: 328
        }];

        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "country";
            chart.startDuration = 1;

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.labelRotation = 90;
            categoryAxis.gridPosition = "start";

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.valueField = "visits";
            graph.balloonText = "[[category]]: [[value]]";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 0.8;
            chart.addGraph(graph);

            chart.write("chartdiv");
           });
         });
       });
    </script>

ヘルプやポインタをいただければ幸いです。

4

1 に答える 1

1

このブログ投稿では、タブまたはその他の動的ページ要素内にグラフを表示する方法について詳しく説明しています。http: //www.amcharts.com/tutorials/displaying-charts-in-tabs-or-other-dynamic-page-elements/

于 2012-08-27T21:42:01.757 に答える