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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue 页面加载进度条组件实例
2018/02/05 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
商业房地产广告语
2014/03/13 职场文书
减负增效提质方案
2014/05/23 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
阿凡达观后感
2015/06/10 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书