[Chart:Column&Bar]????????????

2014-03-04 15:44:54by ???

柱状图和长条图背向堆叠

说明

这篇文章介绍的是如何背向堆叠柱状图和长条图

思考

如下图是2010年年中德国人口金字塔分布,考虑以下几个重点

  1. 如何实现背向堆叠,关键字negative="true"。 图中是将男性(male)的数据做了一下负值处理,来达到背向堆叠的效果。

  2. 如何实现图中两个x轴对立的效果,关键字opposite="true"。注:长条图(bar)的x轴和y轴是颠倒的。

  3. 第二个x轴其实和第一个x轴其实是显示同一组数据的,考虑属性linkedTo的作用。

  4. 将type="bar"属性改成column再试试效果。另外再加上inverted="true"又是什么效果。注:bar图其实就是inverted的column图。

代码

function formatter1(){
    return (Math.abs(this.value) / 1000000) + 'M';
}
function formatter2(){
    return '<b>'+ this.series.name +', 年龄 '+ this.point.category +'</b><br/>'+
            '人口: '+ $A.formatNumber(Math.abs(this.point.y), 0);
}
                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record agerange="0-4" male="1746181" female="1656154"/>
            <a:record agerange="5-9" male="1884428" female="1787564"/>
            <a:record agerange="10-14" male="2089758" female="1981671"/>
            <a:record agerange="15-19" male="2222362" female="2108575"/>
            <a:record agerange="20-24" male="2537431" female="2403438"/>
            <a:record agerange="25-29" male="2507081" female="2366003"/>
            <a:record agerange="30-34" male="2443179" female="2301402"/>
            <a:record agerange="35-39" male="2664537" female="2519874"/>
            <a:record agerange="40-44" male="3556505" female="3360596"/>
            <a:record agerange="45-49" male="3680231" female="3493473"/>
            <a:record agerange="50-54" male="3143062" female="3050775"/>
            <a:record agerange="55-59" male="2721122" female="2759560"/>
            <a:record agerange="60-64" male="2229181" female="2304444"/>
            <a:record agerange="65-69" male="2227768" female="2426504"/>
            <a:record agerange="70-74" male="2176300" female="2568938"/>
            <a:record agerange="75-79" male="1329968" female="1785638"/>
            <a:record agerange="80-84" male="836804" female="1447162"/>
            <a:record agerange="85-89" male="354784" female="1005011"/>
            <a:record agerange="90-94" male="90569" female="330870"/>
            <a:record agerange="95-99" male="28367" female="130632"/>
            <a:record agerange="100+" male="3878" female="21208"/>
        </a:datas>
        <a:fields>
            <a:field name="agerange" prompt="年龄范围"/>
            <a:field name="male" prompt="男"/>
            <a:field name="female" prompt="女"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" type="bar">
    <a:title text="2010年年中德国人口金字塔分布"/>
    <a:tooltip formatter="formatter2"/>
    <a:xAxis>
        <a:xAxi name="agerange" reversed="false" />
        <a:xAxi name="agerange" reversed="false" linkedTo="0" opposite="true" />
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="male,female" max="4000000" min="-4000000">
        	<a:labels formatter="formatter1"/>
        </a:yAxi>
    </a:yAxis>
    <a:plotOptions>
    	<a:series stacking="normal" />
    </a:plotOptions>
    <a:seriesList>
        <a:seriesItem name="male" negative="true"/>
    </a:seriesList>
</a:chart>
Attachments
  1. ????????.rar

Comments

0 Responses to the article

暂时没有评论。

发表评论