在项目中加载Fusioncharts绘图插件
1 下载相关资源,在本文最后部分有相关链接
2 将资源导入到项目中
3 引用资源:在jsp文件中包含Fusioncharts.js文件,如:
<script language="javascript" src="/WIZ/fusioncharts31/js/FusionCharts.js"></script>
此包含路径为绝对路径,可以保证从其他页面跳转到此页面是仍然能够正常绘图。具体的路径由你的项目名称和文件路径决定。
4 引用swf文件,如:
var node_send_chart = new FusionCharts("/WIZ/fusioncharts31/charts/Bar2D.swf", "myChartId", "350", "250", "0", "1");
node_send_chart.setDataXML(node_send_data);
node_send_chart.render("Send");/**/
这里的swf文件路径和上面js路径的写法是一样的
这里有一个变量
node_send_data
此变量是xml格式的一个字符串,你在当前的jsp文件中以字符串的形式拼凑成Fusioncharts要求的格式。如:
var node_health_data = "<chart caption='"+nodeName+":健康得分' showValues='1' baseFontSize='18' >";
node_health_data += "<set label='当前得分' value='83' />";
node_health_data += "<set label='尚需努力' value='17' />";
node_health_data += "</chart>";
你也可以将数据放到XML文件中,在使用数据的时候应该这样:node_state_chart.setDataURL(node_state_data);而不再是node_state_chart.setDataXML(node_state_data);
6 在标签中引用id号
<td><div id="Send">Health</div></td>
这里的字符串“Send”就是调用Fusioncharts绘制的图像
图表分类一览
关键词识别图形类型:
Pie表示饼图
Column表示左右柱状图
Bar表示上下柱状图
Stark(栈)表示柱状图的每根柱子有多节累加起来
下面这篇文章列出的各种表格类型更为详细
http://blog.csdn.net/huwenhu2007/article/details/9049131
FusionCharts的参数列表
下面的这篇文章列出了各种参数及其意义
http://www.cnblogs.com/atree/archive/2010/04/20/FusionCharts-parameter.html
一个多柱状图示例
http://docs.fusioncharts.com/charts/contents/DataFormats/XML/MultiSeries.html
简单的多柱状图
xml代码:
<chart caption='资源使用(前置机1)' showValues='1' >
<categories>
<category label='Jan' />
<category label='Feb' />
<category label='Mar' />
<category label='Apr' />
</categories>
<dataset seriesName='全部资源'>
<set value='10000' />
<set value='11500' />
<set value='12500' />
<set value='15000' />
</dataset>
<dataset seriesName='已使用'>
<set value='27400' />
<set value='29800' />
<set value='25800' />
<set value='26800' />
</dataset>
</chart>
使用的swf文件:MSColumn2D.swf
这里的MS表示多的意思
代码:
var chart = new FusionCharts("/WIZ/fusioncharts31/charts/MSColumn2D.swf", "myChartId", "450", "250", "0", "1");
// chart.setDataXML(data);
chart.setDataURL("data.xml");
chart.render("node1State");
Fusioncharts资源
swf文件下载