[Chart:Area&Areaspline]??????

这篇文章介绍的是如何创建具有渐进效果的区域图。

如下图是小明和小王一周内的水果平均消费量，考虑以下几个重点：

Aurora.Charts.setOptions({colors:['rgb(255,0,0)','rgb(0,255,0)']});//设置chart的颜色集

                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record ming="3" period="周一" wang="1"/>
            <a:record ming="4" period="周二" wang="3"/>
            <a:record ming="3" period="周三" wang="4"/>
            <a:record ming="5" period="周四" wang="3"/>
            <a:record ming="4" period="周五" wang="3"/>
            <a:record ming="10" period="周六" wang="5"/>
            <a:record ming="12" period="周日" wang="4"/>
        </a:datas>
        <a:fields>
            <a:field name="period"/>
            <a:field name="ming" datatype="float" prompt="小明"/>
            <a:field name="wang" datatype="float" prompt="小王"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" type="areaspline">
    <a:title text="一周内的水果平均消费量"/>
    <a:legend layout="vertical" align="left" verticalAlign="top" x="150" y="100"
            floating="true" borderWidth="1" backgroundColor="#FFFFFF" />
    <a:xAxis>
        <a:xAxi name="period">
        	<a:plotBands>
        		<a:plotBand from="4.5" to="6.5" color="rgba(68,170,213,.2)" />
        	</a:plotBands>
        </a:xAxi>
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="ming,wang">
            <a:title text="水果单位"/>
        </a:yAxi>
    </a:yAxis>
    <a:tooltip shared="true" valueSuffix=" units" />
    <a:seriesList>
        <a:seriesItem name="ming">
        	<a:fillColor linearGradient="0,0,0,300" stops="[0,Aurora.Charts.getOptions().colors[0]],
        		[1,Aurora.Charts.Color(Aurora.Charts.getOptions().colors[0]).setOpacity(0).get('rgba')]"/>
        </a:seriesItem>
        <a:seriesItem name="wang">
        	<a:fillColor linearGradient="0,0,0,330" stops="[0,Aurora.Charts.getOptions().colors[1]],
        		[1,Aurora.Charts.Color(Aurora.Charts.getOptions().colors[1]).setOpacity(0).get('rgba')]"/>
        </a:seriesItem>
    </a:seriesList>
</a:chart>