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