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 相关文章推荐
潜说js对象和数组
May 25 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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中extract()函数的定义和用法
2012/08/17 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
基于Vue实现拖拽效果
2018/04/27 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python实现学校管理系统
2018/01/11 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
基于python操作ES实例详解
2019/11/16 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
招商业务员岗位职责
2013/12/16 职场文书
教师求职自荐书
2014/06/14 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
百年校庆感言
2015/08/01 职场文书
老兵退伍感言
2015/08/03 职场文书
高一化学教学反思
2016/02/22 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书