Fusioncharts工具从入门到提高

最新推荐文章于 2024-05-01 08:11:35 发布

C++程序员Carea

最新推荐文章于 2024-05-01 08:11:35 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/calmreason/article/details/14128555

版权

在项目中加载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路径的写法是一样的

5 引用绘图用的数据：

这里有一个变量

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");