1
我想顯示一個jQuery可切換選項卡（使用Ruby on Rails和bootstrap-tab.js）內的JavaScript圖表。如果圖表位於選項卡之外，則圖表顯示正常，但不顯示在選項卡內部。我確信我忽視了一件非常簡單的事情，但我一直在爲這件事而煩惱。Javascript圖表裏面的jQuery可切換選項卡
我的視圖代碼：
<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>
任何幫助或指針會不勝感激。