有时候我们需要FusionCharts图表显示双Y轴,比如我们有两(多)条曲线,一条曲线对应Y轴的数字很大,但另一条曲线对应Y轴的数字又很小,那么当只用一条Y轴的时候,对应数字很小的曲线相对另一条曲线就显得非常不突出了,这个时候就可以考虑用双Y轴曲线,关于双Y轴的例子FusionCharts有好几例,但双Y轴且多个图表为曲线(line)的例子没有,在网上搜了下,看到有提问的,但没有搜到解决方案,我下面就给出这个问题解决之法。
先来看FusionCharts附带的例子Combi2DDY.html,对应的flash为:MSCombiDY2D.swf,其图如下:
对应的XML文本如下:
<chart palette=’2′ caption=’Sales by Product’ subCaption=’March 2006′ showValues=’0′ divLineDecimalPrecision=’1′ limitsDecimalPrecision=’1′ PYAxisName=’Amount’ SYAxisName=’Quantity’ numberPrefix=’$’ formatNumberScale=’0>
<categories>
<category label=’A’ />
<category label=’B’ />
<category label=’C’ />
<category label=’D’ />
<category label=’E’ />
<category label=’F’ />
<category label=’G’ />
<category label=’H’ />
<category label=’I’ />
<category label=’J’ />
</categories>
<dataset seriesName=’Profit’ renderAs=’Area’ parentYAxis=’P'>
<set value=’3242′ />
<set value=’3171′ />
<set value=’700′ />
<set value=’1287′ />
<set value=’1856′ />
<set value=’1126′ />
<set value=’987′ />
<set value=’1610′ />
<set value=’903′ />
<set value=’928′ />
</dataset>
<dataset lineThickness=’3′ seriesName=’Quantity’ parentYAxis=’S'>
<set value=’174′ />
<set value=’197′ />
<set value=’155′ />
<set value=’15′ />
<set value=’66′ />
<set value=’85′ />
<set value=’37′ />
<set value=’10′ />
<set value=’44′ />
<set value=’322′ />
</dataset>
</chart>
现在要将Area图表变为曲线,怎么做呢?其实非常简单!将
<dataset seriesName='Profit' renderAs='Area' parentYAxis='P'>
变为
<dataset seriesName=’Profit’ renderAs=’Line’ parentYAxis=’P'>
即可,如下图:
说明:
parentYAxis=’P'表示对应的为左边的Y轴
parentYAxis=’S'表示对应的为右边的Y轴
据有的人翻译过来的为左边的Y轴称为主轴,右边的Y轴称为次轴,子猴在这里也沿用此翻译,但也可以将左边的称为P轴,右边的称为S轴
renderAs表示flash以什么形状表示,Area就是第一张图看到的区域图表,Line就表示曲线,renderAs的值是关键。
为何这个问题在网上有人提问但却没搜到问题呢?我想原因很可能就是属性renderAs在原版英文文档中根本就不存在!我去查了,在关于这个双Y轴的属性说明中,虽然显示有renderAs=’Area’,但却没有renderAs这个属性的说明,FusionCharts参数的详细说明和功能特性中也没有对此说明。