玩转FusionCharts:双Y轴双(多)曲线(line)

2010年1月22日 | 分类: 技术 | 标签: 5,706浏览 | By admin

有时候我们需要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这个属性的说明,在有人翻译过来的资料中也没有对此说明。

如无转载说明,则均为本站原创文章,转载请注明:来源:子猴博客





相关内容

  1. 2010年1月23日21:20

    真得很好玩

    • wang_w_f
      2011年12月8日16:04

      沒看懂,求案例看一下! 謝謝,最近在研究.. 郵箱一下!

  2. 2010年1月24日01:49

    笨笨愚笨,看不太懂。。使劲学习ing。。

  3. zihou
    2010年1月24日08:14

    笨笨 :

    笨笨愚笨,看不太懂。。使劲学习ing。。

    呵呵,没有用到的东西当然不是太了解了

  4. madbuesky
    2010年5月28日11:31

    free版本的能实现这个功能吗??
    要是能实现麻烦发个邮件,多谢拉

  5. 子猴
    2010年5月28日11:46

    @madbuesky
    free版本肯定是可以的。
    但你要我发什么邮件呢?free版本的fusionCharts网上有下载的,如果是这个功能实现,你可以参照着上面说的做啊

  6. stone
    2010年8月31日20:39

    谢谢,很有用

  7. 2010年10月20日14:46

    No point in punching things you can

  8. 子猴
    2010年10月20日14:51

    @大嘴猴
    your english is very good :)

*

酷!左边勾选上复选框,评论里将显示你博客文章!
:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

Upload Files

你可以上传一张或多张图片,这些图片将附在你评论里