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

这篇文章介绍的是如何让区域与区域之间形成堆叠的效果。

如下图是全世界各地区人口增长历史概况，考虑以下几个重点：

function formatter1(){
    return this.value/10000;
}
function formatter2(){
    var html =['<table><caption>',this.x,'年</caption>'],
    	points = this.points,total=points[0].total,
    	mod;
    for(var i=0,len = points.length;i<len;i++){
        var point = points[i],
        	series = point.series,
        	y = point.y;
        html.push('<tr>',
        	'<td style="color:',series.color,'">',series.name,'</td>',
        	'<td style="text-align:right"><b>',(mod = y%10000)==y?y:((y-mod)/10000+'亿'+mod),'万</b></td>',
    	'</tr>');
    }
    html.push('<tr>',
    	'<td>总计</td>',
    	'<td style="text-align:right"><b>',(mod = total%10000)==total?total:((total-mod)/10000+'亿'+mod),'万</b></td>',
    '</tr>',
    '</table>');
    return html.join('');
}     

                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record period="1750" asia="50200" africa="10600" europe="16300" america="1800" oceania="200"/>
            <a:record period="1800" asia="63500" africa="10700" europe="20300" america="3100" oceania="200"/>
            <a:record period="1850" asia="80900" africa="11100" europe="27600" america="5400" oceania="200"/>
            <a:record period="1900" asia="94700" africa="13300" europe="40800" america="15600" oceania="600"/>
            <a:record period="1950" asia="140200" africa="22100" europe="54700" america="33900" oceania="1300"/>
            <a:record period="1999" asia="363400" africa="76700" europe="72900" america="81800" oceania="3000"/>
            <a:record period="2000" asia="526800" africa="176600" europe="62800" america="120100" oceania="4600"/>
        </a:datas>
        <a:fields>
            <a:field name="period"/>
            <a:field name="asia" datatype="int" prompt="亚洲"/>
            <a:field name="africa" datatype="int" prompt="非洲"/>
            <a:field name="europe" datatype="int" prompt="欧洲"/>
            <a:field name="america" datatype="int" prompt="美洲"/>
            <a:field name="oceania" datatype="int" prompt="大洋洲"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" type="area">
    <a:title text="全世界各地区人口增长历史概况"/>
    <a:subtitle text="来源：Wikipedia.org" />
    <a:xAxis>
        <a:xAxi name="period" tickmarkPlacement="on" />
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="asia,africa,europe,america,oceania">
            <a:title text="亿"/>
            <a:labels formatter="formatter1" />
        </a:yAxi>
    </a:yAxis>
    <a:tooltip shared="true" formatter="formatter2" useHTML="true" />
    <a:plotOptions>
    	<a:area stacking="normal" lineColor="#666666" lineWidth="1">
    		<a:marker lineWidth="1" lineColor="#666666"/>
    	</a:area>
    </a:plotOptions>
</a:chart>

stacking属性还有一个值叫做percent。顾名思义就是以百分比的形式堆叠，如下图所示：

实现的代码如下:

function formatter3(){
    var html =['<table><caption>',this.x,'年</caption>'],
    	points = this.points,total=points[0].total,
    	mod;
    for(var i=0,len = points.length;i<len;i++){
        var point = points[i],
    	series = point.series,
    	y = point.y,
    	percent = point.percentage.toFixed(2);
        html.push('<tr>',
        	'<td style="color:',series.color,'">',series.name,'</td>',
        	'<td style="text-align:right"><b>',percent,'%</b>(',(mod = y%10000)==y?y:((y-mod)/10000+'亿'+mod),'万)</td>',
    	'</tr>');
    }
    html.push('<tr>',
    	'<td>总计</td>',
    	'<td style="text-align:right"><b>100%</b>(',(mod = total%10000)==total?total:((total-mod)/10000+'亿'+mod),'万)</td>',
    '</tr>',
    '</table>');
    return html.join('');
}   

                
<a:chart bindTarget="ds" type="area">
            <a:title text="全世界各地区人口增长历史概况"/>
            <a:subtitle text="来源：Wikipedia.org"/>
            <a:xAxis>
                <a:xAxi name="period" tickmarkPlacement="on"/>
            </a:xAxis>
            <a:yAxis>
                <a:yAxi name="asia,africa,europe,america,oceania">
                    <a:title text="百分比"/>
                </a:yAxi>
            </a:yAxis>
            <a:tooltip formatter="formatter3" shared="true" useHTML="true"/>
            <a:plotOptions>
                <a:area lineColor="#666666" lineWidth="1" stacking="percent">
                    <a:marker lineColor="#666666" lineWidth="1"/>
                </a:area>
            </a:plotOptions>
        </a:chart>