[Chart:Line&Column&Area]???

这篇文章介绍的是如何制作雷达图

如下图是常见的雷达图，考虑以下几个重点

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

                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record column="8" line="1" area="1"/>
            <a:record column="7" line="2" area="8"/>
            <a:record column="6" line="3" area="2"/>
            <a:record column="5" line="4" area="7"/>
            <a:record column="4" line="5" area="3"/>
            <a:record column="3" line="6" area="6"/>
            <a:record column="2" line="7" area="4"/>
            <a:record column="1" line="8" area="5"/>
        </a:datas>
        <a:fields>
            <a:field name="column" datatype="int" type="column" prompt="柱状图"/>
            <a:field name="line" datatype="int" type="line" prompt="线图"/>
            <a:field name="area" datatype="int" type="area" prompt="区域图"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" polar="true">
    <a:title text="雷达图"/>
    <a:xAxis>
    	<a:xAxi tickInterval="45" min="0" max="360">
    		<a:labels formatter="formatter1" />
    	</a:xAxi>
    </a:xAxis>
    <a:yAxis>
        <a:yAxi min="0" name="column,line,area" />
    </a:yAxis>
    <a:pane endAngle="360" startAngle="0"/>
    <a:plotOptions>
    	<a:series pointStart="0" pointInterval="45" />
    	<a:chartcolumn pointPadding="0" groupPadding="0" pointPlacement="between"/>
    </a:plotOptions>
</a:chart>

雷达图还有一种多边形的形式如下图所示

实现的代码如下

                
	<a:dataSets>
	    <a:dataSet id="ds2">
            <a:datas>
                <a:record budget="43000" spending="50000" dept="销售部"/>
                <a:record budget="19000" spending="39000" dept="市场部"/>
                <a:record budget="60000" spending="42000" dept="开发部"/>
                <a:record budget="35000" spending="31000" dept="客服部"/>
                <a:record budget="17000" spending="26000" dept="IT部"/>
                <a:record budget="10000" spending="14000" dept="行政部"/>
            </a:datas>
            <a:fields>
                <a:field name="budget" datatype="int" prompt="分配预算"/>
                <a:field name="spending" datatype="int" prompt="实际支出"/>
                <a:field name="dept" prompt="部门"/>
            </a:fields>
        </a:dataSet>
	</a:dataSets>
	<a:chart bindTarget="ds2" polar="true">
        <a:title text="预算支出对比" x="-80" />
        <a:xAxis>
        	<a:xAxi tickmarkPlacement="on" lineWidth="0" name="dept"/>
        </a:xAxis>
        <a:yAxis>
            <a:yAxi min="0" name="budget,spending" gridLineInterpolation="polygon" lineWidth="0" />
        </a:yAxis>
        <a:pane size="80%"/>
        <a:tooltip shared="true" pointFormat="&lt;span style='color:{series.color}'&gt;{series.name}:
                         &lt;b&gt;${point.y:,.0f}&lt;/b&gt;&lt;br/&gt;"/>
        <a:legend align="right" verticalAlign="top" y="70" layout="vertical"/>
        <a:plotOptions>
        	<a:series pointPlacement="on" />
        </a:plotOptions>
    </a:chart>
	

多边形雷达图的关键属性是gridLineInterpolation="polygon"