FusionCharts图表显示双Y轴双(多)曲线


Posted in Javascript onNovember 22, 2012

项目中需要FusionCharts图表显示双Y轴,好像FCF_MSLine.swf不可以这样,只能显示一个Y轴,多条线,
找了一下,用MSCombiDY2D.swf可以实现,生成图如下:

FusionCharts图表显示双Y轴双(多)曲线

FusionCharts图表显示双Y轴双(多)曲线


两个图表的数据是一样的,设置有一此不同而己
对应的XML文本如下
<chart palette='2' caption='图表' rotateNames='0' showValues='0' divLineDecimalPrecision='1' limitsDecimalPrecision='1' PYAxisName='价格' SYAxisName='数量' numberPrefix='$' formatNumberScale='0'> 
<categories> 
<category label='20121110' /> 
<category label='20121111' /> 
<category label='20121112' /> 
<category label='20121113' /> 
<category label='20121114' /> 
<category label='20121115' /> 
<category label='20121116' /> 
</categories> 
<dataset renderAs='Line' parentYAxis='P' seriesName='Profit'> 
<set value='3242' /> 
<set value='3171' /> 
<set value='700' /> 
<set value='1287' /> 
<set value='1856' /> 
<set value='987' /> 
<set value='1610' /> 
</dataset> 
<dataset lineThickness='1' parentYAxis='S' seriesName='数量' > 
<set value='174' /> 
<set value='197' /> 
<set value='155' /> 
<set value='15' /> 
<set value='66' /> 
<set value='85' /> 
<set value='37' /> 
</dataset> 
</chart>

现在要将区域图表变为曲线只需将
<dataset renderAs='Area' parentYAxis='P' seriesName='Profit'>
改为
<dataset renderAs='Line' parentYAxis='P' seriesName='Profit'>
说明
parentYAxis='P'表示对应的为左边的Y轴
parentYAxis='S'表示对应的为右边的Y轴
renderAs表示形状,Area 为区域图表,Line为曲线图表
关于 参数设置
功能特性
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]
showDivLinues 是否显示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 横向坐标轴标签名称
Javascript 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
jQuery插件开发全解析
Oct 10 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
ECMAScript 创建自己的js类库
Nov 22 #Javascript
javascript克隆对象深度介绍
Nov 20 #Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 #Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 #Javascript
JavaScript实现拼音排序的方法
Nov 20 #Javascript
Js+Flash实现访问剪切板操作
Nov 20 #Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 #Javascript
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
Python创建日历实例
2014/08/21 Python
python3调用R的示例代码
2018/02/23 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
舞蹈教育学专业求职信
2014/06/29 职场文书
项目合作协议书
2014/09/23 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android