<span style="font-size:18px;">fusioncharts是一个很使用的网页报表插件,通过它可以满足各种各样的表格需要而且样式也肯酷。</span>
这里是fusioncharts的下载地址http://www.fusioncharts.com/download/。
接下来就看看它是如何完成一个图表的:
我用的是myeclipse所以就用的web项目做的,首先创建web项目。
然后创建fusioncharts文件夹把压缩包下js文件夹里所有的文件考过来。
在index.jsp中导入js,第一个是必要的js,第二个是主题js。
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript"
src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
<div id="chartContainer">FusionCharts XT will load here!</div>
接下来是关键,自定义图表。
<script type="text/javascript">
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
"type" : "column3d",
"renderAt" : "chartContainer",
"width" : "500",
"height" : "300",
"dataFormat" : "json",
"dataSource" : {
"chart" : {
"caption" : "Monthly revenue for last year",
"subCaption" : "Harry's SuperMart",
"xAxisName" : "Month",
"yAxisName" : "Revenues (In USD)",
"theme" : "fint"
},
"data" : [ {
"label" : "Jan",
"value" : "420000"
}, {
"label" : "Feb",
"value" : "810000"
}, {
"label" : "Mar",
"value" : "720000"
}, {
"label" : "Apr",
"value" : "550000"
}, {
"label" : "May",
"value" : "910000"
}, {
"label" : "Jun",
"value" : "510000"
}, {
"label" : "Jul",
"value" : "680000"
}, {
"label" : "Aug",
"value" : "620000"
}, {
"label" : "Sep",
"value" : "610000"
}, {
"label" : "Oct",
"value" : "490000"
}, {
"label" : "Nov",
"value" : "900000"
}, {
"label" : "Dec",
"value" : "730000"
} ]
}
});
revenueChart.render();
});
</script>
type是图表的类型。
renderAt是在那个控件上显示图表,值是控件的id。
width宽度。
height高度。
dataFormat数据格式json/xml。
dataSource数据源。
chart表格的参数:caption标题、subCaption副标题、xAxisName横轴名称、yAxisName纵轴名称、theme主题。
data具体数据。
这样一个简单的3D柱状图表就完成了。