Fusioncharts使用说明
- 背景
最近由于工作需要，再次接触到了Fusioncharts，但也有不足之处，现在官网上似乎是不支持flash的版本了，只能看到html5相关的javascript版本，无奈再次从网上搜索到了一些别人个人总结的一些用法。
- 总结
fusioncharts的flash版本的xml渲染数据结构常有element包含以下：
<graph>
<categories>
<category Name='区间出现记录数（单位：个）' ShowName='1' /> 。。。
</categories>
<dataset SeriesName='小于-90dBM' Color='9D080D' ShowValues='1' Alpha='100'>
<set Value='1000' Alpha='80' /> 。。。。
</dataset> 。。。
</graph>
- 这里边的graph属性包含一下：
功能特性
animation 是否动画显示数据，默认为1(True)
showNames 是否显示横向坐标轴(x轴)标签名称
rotateNames 是否旋转显示标签，默认为0(False):横向显示
showValues 是否在图表显示对应的数据值，默认为1(True)
yAxisMinValue 指定纵轴(y轴)最小值，数字
yAxisMaxValue 指定纵轴(y轴)最小值，数字
showLimits 是否显示图表限值(y轴最大、最小值)，默认为1(True)
图表标题和轴名称
caption 图表主标题
subCaption 图表副标题
xAxisName 横向坐标轴(x轴)名称
yAxisName 纵向坐标轴(y轴)名称
图表和画布的样式
bgColor 图表背景色，6位16进制颜色值
canvasBgColor 画布背景色，6位16进制颜色值
canvasBgAlpha 画布透明度，[0-100]
canvasBorderColor 画布边框颜色，6位16进制颜色值
canvasBorderThickness 画布边框厚度，[0-100]
shadowAlpha 投影透明度，[0-100]
showLegend 是否显示系列名，默认为1(True)
字体属性
baseFont 图表字体样式
baseFontSize 图表字体大小
baseFontColor 图表字体颜色，6位16进制颜色值
outCnvBaseFont 图表画布以外的字体样式
outCnvBaseFontSize 图表画布以外的字体大小
outCnvBaseFontColor 图表画布以外的字体颜色，6位16进制颜色值
分区线和网格
numDivLines 画布内部水平分区线条数，数字
divLineColor 水平分区线颜色，6位16进制颜色值
divLineThickness 水平分区线厚度，[1-5]
divLineAlpha 水平分区线透明度，[0-100]
showAlternateHGridColor 是否在横向网格带交替的颜色，默认为0(False)
alternateHGridColor 横向网格带交替的颜色，6位16进制颜色值
alternateHGridAlpha 横向网格带的透明度，[0-100]
showDivLineValues 是否显示Div行的值，默认？？
numVDivLines 画布内部垂直分区线条数，数字
vDivLineColor 垂直分区线颜色，6位16进制颜色值
vDivLineThickness 垂直分区线厚度，[1-5]
vDivLineAlpha 垂直分区线透明度，[0-100]
showAlternateVGridColor 是否在纵向网格带交替的颜色，默认为0(False)
alternateVGridColor 纵向网格带交替的颜色，6位16进制颜色值
alternateVGridAlpha 纵向网格带的透明度，[0-100]
数字格式
numberPrefix 增加数字前缀
numberSuffix 增加数字后缀 % 为 '%25'
formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或M
decimalPrecision 指定小数位的位数，[0-10] 例如：='0' 取整
divLineDecimalPrecision 指定水平分区线的值小数位的位数，[0-10]
limitsDecimalPrecision 指定y轴最大、最小值的小数位的位数，[0-10]
formatNumber 逗号来分隔数字(千位，百万位),默认为1(True)；若取0,则不加分隔符
decimalSeparator 指定小数分隔符,默认为'.'
thousandSeparator 指定千分位分隔符,默认为','
Tool-tip/Hover标题
showhovercap 是否显示悬停说明框，默认为1(True)
hoverCapBgColor 悬停说明框背景色，6位16进制颜色值
hoverCapBorderColor 悬停说明框边框颜色，6位16进制颜色值
hoverCapSepChar 指定悬停说明框内值与值之间分隔符,默认为','
折线图的参数
lineThickness 折线的厚度
anchorRadius 折线节点半径，数字
anchorBgAlpha 折线节点透明度，[0-100]
anchorBgColor 折线节点填充颜色，6位16进制颜色值
anchorBorderColor 折线节点边框颜色，6位16进制颜色值
Set标签使用的参数
value 数据值
color 颜色
link 链接（本窗口打开[Url]，新窗口打开[n-Url]，调用JS函数[JavaScript:函数]）
name 横向坐标轴标签名称
- dataset 相关属性
<dataset SeriesName='[-90dBm,-80dBm)' Color='F6BD0F' ShowValues='1' Alpha='100'>
<set Value='3500' Alpha='80' />
</dataset>
怎么使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JavaScript/jquery.js" type="text/javascript"></script>
<script src="JavaScript/FusionCharts.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var myChartId = new Date().getTime();
var chart = new FusionCharts('FusionChartsFiles/FCF_MSColumn3D.swf', myChartId, "400", "300");
chart.setDataURL("Data.xml");
chart.render(document.getElementById("divSignalRangeStatitistics"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divSignalRangeStatitistics">
</div>
</form>
</body>
</html>
对应的data.xml
<?xml version="1.0" encoding="utf-8" ?>
<graph baseFont='Arial' baseFontSize='12' outCnvBaseFontSize='12' numberSuffix='' animation='1' bgAlpha='50' showhovercap='1' bgColor='ffffff' showValues='1' showNames='1' xAxisName='区域' yAxisName='接收信号数' yAxisMinValue='0' yAxisMaxValue='100' decimalPrecision='0' formatNumberScale='0' caption='信息强度分布图'>
<categories FontSize='10' FontColor='0000FF'>
<!-- AFD8F8,F6BD0F,8BBA00,FF8E46,008E8E,D64646,8E468E,588526,B3AA00,008ED6,9D080D,A186BE, -->
<category Name='信息强度区间出现记录数（单位：个）' ShowName='1' />
</categories>
<dataset SeriesName='小于-90dBM' Color='9D080D' ShowValues='1' Alpha='100'>
<set Value='1000' Alpha='80' />
</dataset>
<dataset SeriesName='[-90dBm,-80dBm)' Color='F6BD0F' ShowValues='1' Alpha='100'>
<set Value='3500' Alpha='80' />
</dataset>
<dataset SeriesName='[-80dBm,-70dBm)' Color='8BBA00' ShowValues='1' Alpha='100'>
<set Value='2400' Alpha='80' />
</dataset>
<dataset SeriesName='[-70dBm,-60dBm)' Color='FF8E46' ShowValues='1' Alpha='100'>
<set Value='8000' Alpha='80' />
</dataset>
<dataset SeriesName='[-60dBm,-50dBm)' Color='008E8E' ShowValues='1' Alpha='100'>
<set Value='2100' Alpha='80' />
</dataset>
<dataset SeriesName='大于或等于-50dBm' Color='A186BE' ShowValues='1' Alpha='100'>
<set Value='1987' Alpha='80' />
</dataset>
</graph>
- 使用技巧：
当我们遇到 y轴出现 Nan.NULL时，可以在graph上添加 yaliasMaxValue='100',既可以解决该问题。
当数据库初始化化，无数据时，往往这个工具不会显示坐标轴（比如 [-80dBm,-70dBm]的统计记录为0时，在坐标轴上就不会出现该统计柱状图）在图表上，我可们可以给这个坐标一个0.001,当让我们decimalPrecision(指定小数位的位数)设置值这时要低于3位小数，否则该0.001就会显示为非0的数据了。
参考：
http://www.cnblogs.com/mingforyou/archive/2012/11/13/2767829.html
http://blog.csdn.net/liangxanhai/article/details/8056295
Fusioncharts使用说明的更多相关文章
- Atitit.项目修改补丁打包工具 使用说明
Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...
- awk使用说明
原文地址:http://www.cnblogs.com/verrion/p/awk_usage.html Awk使用说明 运维必须掌握的三剑客工具:grep(文件内容过滤器),sed(数据流处理器), ...
- JavaScript图表FusionCharts免费在线公开课，由印度原厂技术工程师主讲，10月13日发车
FusionCharts公开课达人还你做 轻松晋升图表大师 [开课时间]10月13日 14:30[主讲老师]印度原厂技术工程师[开课形式]网络在线公开课[活动费用]前50名免费 现在就可以报名哦 报 ...
- FusionCharts和highcharts 饼图区别!
FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...
- “我爱背单词”beta版发布与使用说明
我爱背单词BETA版本发布 第二轮迭代终于画上圆满句号,我们的“我爱背单词”beta版本已经发布. Beta版本说明 项目名称 我爱背单词 版本 Beta版 团队名称 北京航空航天大学计算机学院 拒 ...
- Oracle 中 union 和union all 的简单使用说明
1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...
- FusionCharts的使用方法（超详细）
今天统计价格变化规律的时候找到的一个很好的文档,很详细 一.简介 Ø FusionCharts 是InfoSoft Global 公司的一个产品,InfoSoft Global 公司是专业的Flash ...
- FusionCharts参数说明 （中文）
FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关参数中文说明如下. FusionCharts Free中文开发指南第二版.pdf 功能特性 animation ...
- Map工具系列-02-数据迁移工具使用说明
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
随机推荐
- (转)经典SQL查询语句大全
(转)经典SQL查询语句大全 一.基础1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql s ...
- linux下创建和删除软、硬链接
linux下创建和删除软.硬链接 在Linux系统中,内核为每一个新创建的文件分配一个Inode(索引结点),每个文件都有一个惟一的inode号.文件属性保存在索引结点里,在访问文件时,索引结点被复制 ...
- php安装json模块
centOS上因为看php源码中没有json模块,于是采用pecl自动编译安装:# yum install php-devel# yum install php-pear# yum install g ...
- 【转载】C内存分配
一.预备知识—程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. ...
- 前端框架Bootstrap的Modal使用Ajax数据源,如何避免数据被缓存
1.绑定事件,在关闭的时候,直接将数据清除: $("#model").on("hidden.bs.model",function(e){$(this).remo ...
- Error in notifier
sudo apt-get install libnotify-bin or 在gulpfile.js第一行插入 process.env.DISABLE_NOTIFIER = true; 禁用notif ...
- php浮点数计算问题
如果用php的+-*/计算浮点数的时候,可能会遇到一些计算结果错误的问题,比如echo intval( 0.58*100 );会打印57,而不是58,这个其实是计算机底层二进制无法精确表示浮点数的一个 ...
- C# Unicode编码与解码方法
public static class ExtentMethod { public static string ToUnicodeString(this string str) { StringBui ...
- javascript小实例，PC网页里的拖拽
几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...
- Scrum 的相关概念
Scrum 的相关概念 4.1 Scrum 的起源 Scrum 是一种灵活的敏捷软件开发管理过程,这个名词来源于英式橄榄球.Scrum方法由Ken Schwaber和Jeff Sutherland ...