FusionCharts:以MSCombiDY2D.swf为例的双Y轴双(多)曲线(line)图表

有时候我们需要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参数的详细说明和功能特性中也没有对此说明。

本文地址:http://www.cnblogs.com/atree/archive/2010/12/05/FusionCharts-MSCombiDY2D-Line.html

转自:子猴博客

posted on 2010-12-05 20:52  zock  阅读(8584)  评论(5编辑  收藏  举报