[Chart:Columnrange]?????

2014-03-11 10:56:07by ???

柱状范围图

说明

这篇文章介绍的是如何制作柱状范围

思考

如下图是月温度变化,考虑以下几个重点

  1. 如何实现区域范围图,关键字type="columnrange"

  2. 如何绑定y轴数据

代码

function formatter1(){
    return this.y + '°C';
}
                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record min="-9.7" max="9.4" period="1月"/>
            <a:record min="-8.7" max="6.5" period="2月"/>
            <a:record min="-3.5" max="9.4" period="3月"/>
            <a:record min="-1.4" max="19.9" period="4月"/>
            <a:record min="0" max="22.6" period="5月"/>
            <a:record min="2.9" max="29.5" period="6月"/>
            <a:record min="9.2" max="30.7" period="7月"/>
            <a:record min="7.3" max="26.5" period="8月"/>
            <a:record min="4.4" max="18.0" period="9月"/>
            <a:record min="-3.1" max="11.4" period="10月"/>
            <a:record min="-5.2" max="10.4" period="11月"/>
            <a:record min="-13.5" max="9.8" period="12月"/>
        </a:datas>
        <a:fields>
            <a:field name="period"  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="columnrange" inverted="true" >
    <a:title text="月温度变化"/>
    <a:tooltip valueSuffix="°C"/>
    <a:xAxis>
        <a:xAxi name="period"/>
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="range(min~max)">
        	<a:title text="温度(°C)" />
        </a:yAxi>
    </a:yAxis>
    <a:plotOptions>
    	<a:columnrange>
    		<a:dataLabels enabled="true" formatter="formatter1" />
    	</a:columnrange>
    </a:plotOptions>
    <a:legend enabled="false" />
</a:chart>

注释

  1. yAxi上的属性name="range(min~max)"是用来绑定y轴的范围数据

Demo
  1. ?????
Attachments
  1. ?????.rar

Comments

0 Responses to the article

暂时没有评论。

发表评论