[Chart:Column&Bar]????

2014-02-21 15:37:21by ???

分组堆叠

说明

这篇文章介绍的是柱状图和长条图的分组堆叠

思考

如下图是根据性别分组的各水果总消耗量,考虑以下几个重点:

  1. 如何实现堆叠效果,可参考区域图的堆叠

  2. 如何分组堆叠

  3. 将type="column"属性改成bar再试试效果

代码

function formatter1(){
    return '<b>'+ this.x +'</b><br/>'+
        this.series.name +': '+ this.y +'<br/>'+
        '总计: '+ this.point.stackTotal;
}
                
<a:dataSets>
	<a:dataSet id="ds">
		<a:datas>
			<a:record fruit="苹果" ming="5" wang="3" zi="2" hong="3"/>
			<a:record fruit="橘子" ming="3" wang="4" zi="5" hong="0"/>
			<a:record fruit="生梨" ming="4" wang="4" zi="6" hong="4"/>
			<a:record fruit="葡萄" ming="7" wang="2" zi="2" hong="4"/>
			<a:record fruit="香蕉" ming="2" wang="5" zi="1" hong="3"/>
		</a:datas>
		<a:fields>
			<a:field name="ming" prompt="小明" datatype="int" />
			<a:field name="wang" prompt="小王" datatype="int" />
			<a:field name="zi" prompt="阿紫" datatype="int" />
			<a:field name="hong" prompt="小红" datatype="int" />
		</a:fields>
	</a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" type="column">
    <a:title text="根据性别分组的各水果总消耗量"/>
    <a:xAxis>
        <a:xAxi name="fruit" />
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="ming,wang,zi,hong" allowDecimals="false"  min="0">
            <a:title text="水果数量"/>
        </a:yAxi>
    </a:yAxis>
    <a:tooltip formatter="formatter1" />
    <a:plotOptions>
        <a:chartcolumn stacking="normal"/>
    </a:plotOptions>
    <a:seriesList>
    	<a:seriesItem name="ming" stack="男"/>
    	<a:seriesItem name="wang" stack="男"/>
    	<a:seriesItem name="zi" stack="女"/>
    	<a:seriesItem name="hong" stack="女"/>
    </a:seriesList>
</a:chart>
Demo
  1. ????
Attachments
  1. ????.rar

Comments

0 Responses to the article

暂时没有评论。

发表评论