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>
任何帮助或指针会不胜感激。