[Chart:Errorbar]???

这篇文章介绍的是如何制作误差图

如下图是温度和降雨量对比图，考虑以下几个重点

function formatter1(){
    return this.value + '°C';
}
function formatter2(){
    return this.value + ' mm';
}   

                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record period="1月" rainfall="49.9" errorlow1="48" errorhigh1="51" temp="7" errorlow2="6" errorhigh2="8"/>
            <a:record period="2月" rainfall="71.5" errorlow1="68" errorhigh1="73" temp="6.9" errorlow2="5.9" errorhigh2="7.6"/>
            <a:record period="3月" rainfall="106.4" errorlow1="92" errorhigh1="110" temp="9.5" errorlow2="9.4" errorhigh2="10.4"/>
            <a:record period="4月" rainfall="129.2" errorlow1="128" errorhigh1="136" temp="14.5" errorlow2="14.1" errorhigh2="15.9"/>
            <a:record period="5月" rainfall="144" errorlow1="140" errorhigh1="150" temp="18.2" errorlow2="18" errorhigh2="20.1"/>
            <a:record period="6月" rainfall="176" errorlow1="171" errorhigh1="179" temp="21.5" errorlow2="21" errorhigh2="24"/>
            <a:record period="7月" rainfall="135.6" errorlow1="135" errorhigh1="143" temp="25.2" errorlow2="23.2" errorhigh2="25.3"/>
            <a:record period="8月" rainfall="148.5" errorlow1="142" errorhigh1="149" temp="26.5" errorlow2="26.1" errorhigh2="27.8"/>
            <a:record period="9月" rainfall="216.4" errorlow1="204" errorhigh1="220" temp="23.3" errorlow2="23.2" errorhigh2="23.9"/>
            <a:record period="10月" rainfall="194.1" errorlow1="189" errorhigh1="199" temp="18.3" errorlow2="18" errorhigh2="21.1"/>
            <a:record period="11月" rainfall="95.6" errorlow1="95" errorhigh1="110" temp="13.9" errorlow2="12.9" errorhigh2="14"/>
            <a:record period="12月" rainfall="54.4" errorlow1="52" errorhigh1="56" temp="9.6" errorlow2="7.6" errorhigh2="10"/>
        </a:datas>
        <a:fields>
            <a:field name="rainfall" datatype="float" prompt="降雨"/>
            <a:field name="errorlow1" datatype="float" prompt="最低降雨"/>
            <a:field name="errorhigh1" datatype="float" prompt="最高降雨"/>
            <a:field name="temp" datatype="float" prompt="温度"/>
            <a:field name="errorlow2" datatype="float" prompt="最小温度"/>
            <a:field name="errorhigh2" datatype="float" prompt="最大温度"/>
            <a:field name="period" prompt="月份"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" zoomType="xy">
    <a:title text="温度和降雨"/>
    <a:xAxis>
        <a:xAxi name="period"/>
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="rainfall,range(errorlow1~errorhigh1)" opposite="true">
        	<a:title text="降雨" style="color:#4572A7" />
        	<a:labels formatter="formatter2" style="color:#4572A7"/>
        </a:yAxi>
        <a:yAxi name="temp,range(errorlow2~errorhigh2)">
        	<a:title text="温度" style="color:#89A54E" />
        	<a:labels formatter="formatter1" style="color:#89A54E"/>
        </a:yAxi>
    </a:yAxis>
    <a:tooltip shared="true"/>
    <a:seriesList>
    	<a:seriesItem name="temp" color="#89A54E" type="spline">
    		<a:tooltip pointFormat="&lt;span style='font-weight: bold;
		color: {series.color}'&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y:.1f}°C&lt;/b&gt; " />
    	</a:seriesItem>
    	<a:seriesItem name="range(errorlow2~errorhigh2)" type="errorbar">
    		<a:tooltip pointFormat="(误差范围: {point.low}-{point.high}°C)&lt;br/&gt;" />
    	</a:seriesItem>
    	<a:seriesItem name="rainfall" color="#4572A7" type="column">
    		<a:tooltip pointFormat="&lt;span style='font-weight: bold;
		color: {series.color}'&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y:.1f} mm&lt;/b&gt; " />
    	</a:seriesItem>
    	<a:seriesItem name="range(errorlow1~errorhigh1)" type="errorbar">
    		<a:tooltip pointFormat="(误差范围: {point.low}-{point.high} mm)&lt;br/&gt;" />
    	</a:seriesItem>
    </a:seriesList>
</a:chart>