[Chart:Arearange&Areasplinerange]?????

这篇文章介绍的是如何定制区域范围图

如下图是7月份的平均温度以及温差范围，考虑以下几个重点

function getColor(){
    return $A.Charts.getOptions().colors[0];
}

                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record period="2009-07-01 08:00:00" min="14.3" max="27.7" average="21.5"/>
            <a:record period="2009-07-02 08:00:00" min="14.5" max="27.8" average="22.1"/>
            <a:record period="2009-07-03 08:00:00" min="15.5" max="29.6" average="23"/>
            <a:record period="2009-07-04 08:00:00" min="16.7" max="30.7" average="23.8"/>
            <a:record period="2009-07-05 08:00:00" min="16.5" max="25.0" average="21.4"/>
            <a:record period="2009-07-06 08:00:00" min="17.8" max="25.7" average="21.3"/>
            <a:record period="2009-07-07 08:00:00" min="13.5" max="24.8" average="18.3"/>
            <a:record period="2009-07-08 08:00:00" min="10.5" max="21.4" average="15.4"/>
            <a:record period="2009-07-09 08:00:00" min="9.2" max="23.8" average="16.4"/>
            <a:record period="2009-07-10 08:00:00" min="11.6" max="21.8" average="17.7"/>
            <a:record period="2009-07-11 08:00:00" min="10.7" max="23.7" average="17.5"/>
            <a:record period="2009-07-12 08:00:00" min="11.0" max="23.3" average="17.6"/>
            <a:record period="2009-07-13 08:00:00" min="11.6" max="23.7" average="17.7"/>
            <a:record period="2009-07-14 08:00:00" min="11.8" max="20.7" average="16.8"/>
            <a:record period="2009-07-15 08:00:00" min="12.6" max="22.4" average="17.7"/>
            <a:record period="2009-07-16 08:00:00" min="13.6" max="19.6" average="16.3"/>
            <a:record period="2009-07-17 08:00:00" min="11.4" max="22.6" average="17.8"/>
            <a:record period="2009-07-18 08:00:00" min="13.2" max="25.0" average="18.1"/>
            <a:record period="2009-07-19 08:00:00" min="14.2" max="21.6" average="17.2"/>
            <a:record period="2009-07-20 08:00:00" min="13.1" max="17.1" average="14.4"/>
            <a:record period="2009-07-21 08:00:00" min="12.2" max="15.5" average="13.7"/>
            <a:record period="2009-07-22 08:00:00" min="12.0" max="20.8" average="15.7"/>
            <a:record period="2009-07-23 08:00:00" min="12.0" max="17.1" average="14.6"/>
            <a:record period="2009-07-24 08:00:00" min="12.7" max="18.3" average="15.3"/>
            <a:record period="2009-07-25 08:00:00" min="12.4" max="19.4" average="15.3"/>
            <a:record period="2009-07-26 08:00:00" min="12.6" max="19.9" average="15.8"/>
            <a:record period="2009-07-27 08:00:00" min="11.9" max="20.2" average="15.2"/>
            <a:record period="2009-07-28 08:00:00" min="11.0" max="19.3" average="14.8"/>
            <a:record period="2009-07-29 08:00:00" min="10.8" max="17.8" average="14.4"/>
            <a:record period="2009-07-30 08:00:00" min="11.8" max="18.5" average="15"/>
            <a:record period="2009-07-31 08:00:00" min="10.8" max="16.1" average="13.6"/>
        </a:datas>
        <a:fields>
            <a:field name="period" datatype="date" prompt="日期"/>
            <a:field name="average" datatype="float" prompt="温度"/>
            <a:field name="max" datatype="float" prompt="最高温度"/>
            <a:field name="min" datatype="float" prompt="最低温度"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" type="arearange">
    <a:title text="7月温度"/>
    <a:tooltip crosshairs="true" shared="true" valueSuffix="°C" />
    <a:xAxis>
        <a:xAxi name="period" type="datetime"/>
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="average,range(min~max)">
        </a:yAxi>
    </a:yAxis>
	<a:seriesList>
	    <a:seriesItem name="average" type="line" zIndex="1">
	        <a:marker fillColor="white" lineColor="window['getColor']()" lineWidth="2"/>
	    </a:seriesItem>
	    <a:seriesItem name="range(min~max)" color="window.getColor()" fillOpacity="0.3" lineWidth="0" linkedTo=":previous"/>
	</a:seriesList>
</a:chart>