| [Chart:Area&Areaspline]?????????????2014-02-19 16:43:15by ??? 如下图是全世界各地区人口增长历史概况,考虑以下几个重点:
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> Demo Attachments |
Comments
0 Responses to the article暂时没有评论。