FusionCharts双y轴解析（转）

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://blog.sina.com.cn/s/blog_77f72c0701010f2k.html

 

<!--EndFragment-->

评论

1 楼 极客翔天 2012-09-19  

很不错！顶