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对象和DOM对象相互转化
Apr 24 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 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的变量总结 新手推荐
2011/04/18 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
理解Python中的类与实例
2015/04/27 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
简单了解Python write writelines区别
2020/02/27 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
.NET概念性的面试题
2012/02/29 面试题
自主招生自荐信指南
2014/02/04 职场文书
网聊搭讪开场白
2015/05/28 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
Python中的pprint模块
2021/11/27 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技