Question

我试图在jQuery togglable选项卡中显示一个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>

非常感谢任何帮助或指示。

Answer 1

此博客文章详细介绍了如何在选项卡或其他动态页面元素中显示图表： http://www.amcharts.com/tutorials/displaying-charts-in-tabs-or-other-dynamic-page-elements/

jQuery可切换选项卡中的Javascript图表

1 个答案: