答案 0 :(得分:1)
当您将图表的显示从validateSize
切换为none
时,您必须调用图表对象的block
方法,如this example that uses tabs所示。这是使用您的结构的另一个例子:
var charts = {};
charts["chart1"] = AmCharts.makeChart("chart1", {
type: "serial",
dataProvider: [{
"value": 1,
"category": "Category 1"
}, {
"value": 2,
"category": "Category 2"
}, {
"value": 3,
"category": "Category 3"
}],
categoryField: "category",
graphs: [{
valueField: "value",
type: "column",
fillAlphas: .8
}]
});
charts["chart2"] = AmCharts.makeChart("chart2", {
type: "pie",
dataProvider: [{
"value": 2,
"title": "Slice 1"
}, {
"value": 2,
"title": "Slice 2"
}, {
"value": 2,
"category": "Slice 3"
}],
titleField: "title",
valueField: "value"
});
var currentChart;
function showChart(divid) {
if (currentChart !== undefined)
currentChart.style.display = "none";
if (divid) {
currentChart = document.getElementById(divid);
currentChart.style.display = "block";
charts[divid].validateSize();
} else {
currentChart = undefined;
}
}
$(document).ready(function() {
showChart('chart1');
});
.chartBoxSingle {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/pie.js"></script>
<div class="chartWrapper" id="chartSingleTest1">
<select onchange="showChart(this.options[this.selectedIndex].value);">
<option value="chart1">Chart #1</option>
<option value="chart2">Chart #2</option>
</select>
<div id="chart1" class="chartBoxSingle" style="display: none;"></div>
<div id="chart2" class="chartBoxSingle" style="display: none;"></div>
</div>