FusionCharts Suite XT图表控件可以使用JavaScript在运行时得到图表对象,目前控件提供了三种方法可以供开发人员在运行时获取图表对象,以便对图表进行一个操作,如修改图表属性或是动态改变图表类型,下面就一一介绍怎么在运行时获取图表对象:
1.通过图表对象的'id'来获取图表对象
<html>
<head>
<script>
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
id: 'revenue-chart',
type: 'column2d',
renderAt: 'chart-container',
dataFormat: 'json'
dataSource: {
// Chart data goes here
}
});
revenueChart.render();
revenueChart = FusionCharts('revenue-chart');
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts will render here</div>
</body>
</html>
2.当FusionChart使用时,图表呈现在页面上,'items'对象包含了呈现在页面上的所有图表元素,所以可以通过该对象来获取图表对象
<html>
<head>
<script>
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
id: 'revenue-chart',
type: 'column2d',
renderAt: 'chart-container',
dataFormat: 'json'
dataSource: {
// Chart data goes here
}
});
revenueChart.render();
revenueChart = FusionCharts.items['revenue-chart'];
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts will render here</div>
</body>
</html>
3.使用控件提供的'getChartFromId' 函数来获取图表对象
<html>
<head>
<script>
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
id: 'revenue-chart',
type: 'column2d',
renderAt: 'chart-container',
dataFormat: 'json'
dataSource: {
// Chart data goes here
}
});
revenueChart.render();
revenueChart = getChartFromId('revenue-chart');
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts will render here</div>
</body>
</html>