benwu 发表于 2012-12-22 21:28:55

FusionCharts:双Y轴双(多)曲线图表

<div id="cnblogs_post_body">
项目中需要FusionCharts图表显示双Y轴,好像FCF_MSLine.swf不可以这样,只能显示一个Y轴,多条线,

找了一下,用MSCombiDY2D.swf可以实现,生成图如下:

http://images.cnblogs.com/cnblogs_com/benwu/104390.png
http://images.cnblogs.com/cnblogs_com/benwu/211921.png


两个图表的数据是一样的,设置有一此不同而己
对应的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>
<datasetrenderAs='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>

现在要将区域图表变为曲线只需将
<datasetrenderAs='Area' parentYAxis='P' seriesName='Profit'>
改为
<datasetrenderAs='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                画布透明度,
canvasBorderColor            画布边框颜色,6位16进制颜色值
canvasBorderThickness      画布边框厚度,
shadowAlpha                投影透明度,
showLegend                  是否显示系列名,默认为1(True)
字体属性
baseFont                  图表字体样式
baseFontSize                图表字体大小
baseFontColor                图表字体颜色,6位16进制颜色值
outCnvBaseFont                图表画布以外的字体样式
outCnvBaseFontSize            图表画布以外的字体大小
outCnvBaseFontColor      图表画布以外的字体颜色,6位16进制颜色值
分区线和网格
numDivLines                画布内部水平分区线条数,数字
divLineColor                水平分区线颜色,6位16进制颜色值
divLineThickness            水平分区线厚度,
divLineAlpha                水平分区线透明度,
showAlternateHGridColor    是否在横向网格带交替的颜色,默认为0(False)
alternateHGridColor      横向网格带交替的颜色,6位16进制颜色值
alternateHGridAlpha      横向网格带的透明度,
showDivLinues            是否显示Div行的值,默认??
numVDivLines                画布内部垂直分区线条数,数字
vDivLineColor                垂直分区线颜色,6位16进制颜色值
vDivLineThickness            垂直分区线厚度,
vDivLineAlpha                垂直分区线透明度,
showAlternateVGridColor    是否在纵向网格带交替的颜色,默认为0(False)
alternateVGridColor      纵向网格带交替的颜色,6位16进制颜色值
alternateVGridAlpha      纵向网格带的透明度,
数字格式
numberPrefix                增加数字前缀
numberSuffix                增加数字后缀    % 为 '%25'
formatNumberScale      是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M
decimalPrecision            指定小数位的位数,    例如:='0' 取整
divLineDecimalPrecision    指定水平分区线的值小数位的位数,
limitsDecimalPrecision      指定y轴最大、最小值的小数位的位数,
formatNumber                逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符
decimalSeparator            指定小数分隔符,默认为'.'
thousandSeparator            指定千分位分隔符,默认为','
Tool-tip/Hover标题
showhovercap                是否显示悬停说明框,默认为1(True)
hoverCapBgColor            悬停说明框背景色,6位16进制颜色值
hoverCapBorderColor      悬停说明框边框颜色,6位16进制颜色值
hoverCapSepChar            指定悬停说明框内值与值之间分隔符,默认为','
折线图的参数
lineThickness                折线的厚度
anchorRadius                折线节点半径,数字
anchorBgAlpha                折线节点透明度,
anchorBgColor                折线节点填充颜色,6位16进制颜色值
anchorBorderColor            折线节点边框颜色,6位16进制颜色值
Set标签使用的参数
value                        数据值
color                        颜色
link                        链接(本窗口打开,新窗口打开,调用JS函数)
name                        横向坐标轴标签名称

具体可参考 查看
页: [1]
查看完整版本: FusionCharts:双Y轴双(多)曲线图表