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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
javascript屏蔽右键代码
May 15 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
微信小程序如何使用云开发
May 17 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php中Smarty模板初体验
2011/08/08 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Python设计模式之代理模式实例详解
2019/01/19 Python
Python简单I/O操作示例
2019/03/18 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
村级个人对照检查材料
2014/08/22 职场文书
学生评语集锦
2015/01/04 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
公司管理建议书
2015/09/14 职场文书