彩票走势图

怎样用FusionCharts做双Y轴双(多)曲线

原创|使用教程|编辑:龚雪|2014-12-18 10:19:21.000|阅读 590 次

概述:项目中需要FusionCharts图表显示双Y轴,好像FCF_MSLine.swf不可以这样,只能显示一个Y轴,多条线,找了一下,用MSCombiDY2D.swf可以实现,现在晒出来和大家分享一下。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

【年终大促 巅峰盛慧】FusionCharts XT及套包<8折> 截止日期2014/12/31

项目中需要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 横向坐标轴标签名称

狂欢继续!【年终大促 巅峰盛"慧" 】促销火热进行中 iPhone 6 Plus、 iPhone 6、iPad Air满就送,还不赶快买买买!


标签:FusionChartsFusionCharts图表

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP