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 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 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的autoload机制的实现解析
2012/09/15 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python新手如何理解循环加载模块
2020/05/29 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
scrapy-splash简单使用详解
2021/02/21 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
机动车登记业务委托书
2014/10/08 职场文书
学生保证书
2015/01/16 职场文书
社区活动总结范文
2015/05/07 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python