[Chart:Bubble]3D???

2014-03-17 16:09:10by ???

3D气泡图

说明

这篇文章介绍的是如何制作气泡围以及3D效果

思考

如下图是简单的3D气泡图,考虑以下几个重点

  1. 气泡图数据的维度是多少。

  2. 如何区分多组气泡图,关键字groupBy

  3. 如何制作3D效果

代码

                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record x="9" y="81" size="63" group="1"/>
            <a:record x="98" y="5" size="89" group="1"/>
            <a:record x="51" y="50" size="73" group="1"/>
            <a:record x="41" y="22" size="14" group="1"/>
            <a:record x="58" y="24" size="20" group="1"/>
            <a:record x="78" y="37" size="34" group="1"/>
            <a:record x="55" y="56" size="53" group="1"/>
            <a:record x="18" y="45" size="70" group="1"/>
            <a:record x="42" y="44" size="28" group="1"/>
            <a:record x="3" y="52" size="59" group="1"/>
            <a:record x="31" y="18" size="97" group="1"/>
            <a:record x="79" y="91" size="63" group="1"/>
            <a:record x="93" y="23" size="23" group="1"/>
            <a:record x="44" y="83" size="22" group="1"/>
            <a:record x="42" y="38" size="20" group="2"/>
            <a:record x="6" y="18" size="1" group="2"/>
            <a:record x="1" y="93" size="55" group="2"/>
            <a:record x="57" y="2" size="90" group="2"/>
            <a:record x="80" y="76" size="22" group="2"/>
            <a:record x="11" y="74" size="96" group="2"/>
            <a:record x="88" y="56" size="10" group="2"/>
            <a:record x="30" y="47" size="49" group="2"/>
            <a:record x="57" y="62" size="98" group="2"/>
            <a:record x="4" y="16" size="16" group="2"/>
            <a:record x="46" y="10" size="11" group="2"/>
            <a:record x="22" y="87" size="89" group="2"/>
            <a:record x="57" y="91" size="82" group="2"/>
            <a:record x="45" y="15" size="98" group="2"/>
        </a:datas>
        <a:fields>
            <a:field name="x" datatype="int"/>
            <a:field name="y" datatype="int"/>
            <a:field name="size" datatype="int"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" type="bubble" plotBorderWidth="1" zoomType="xy" groupBy="group" >
    <a:title text="3D气泡图"/>
    <a:xAxis>
        <a:xAxi name="x" gridLineWidth="1"/>
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="y" startOnTick="false" endOnTick="false"/>
    </a:yAxis>
    <a:zAxis>
    	<a:zAxi name="size"/>
    </a:zAxis>
    <a:seriesList>
    	<a:seriesItem name="1">
    		<a:marker>
    			<a:fillColor radialGradient="0.4,0.3,0.7" stops="[0, 'rgba(255,255,255,0.5)'],[1, 'rgba(69,114,167,0.5)']"/>
    		</a:marker>
    	</a:seriesItem>
    	<a:seriesItem name="2">
    		<a:marker>
    			<a:fillColor radialGradient="0.4,0.3,0.7" stops="[0, 'rgba(255,255,255,0.5)'],[1, 'rgba(170,70,67,0.5)']"/>
    		</a:marker>
    	</a:seriesItem>
    </a:seriesList>
</a:chart>

注释

  1. 这里用到了z轴来展示气泡图的大小,目前只有气泡图支持zAxis节点。

  2. radialGradient是径向型渐变,3个值分别是圆心x、圆心y和渐变半径。

Demo
  1. 3D???
Attachments
  1. 3D???.rar

Comments

1 Responses to the article
  1. zhenzhong.shen@hand-china.com 留言于:2017年06月05日 15:26
    好东西。
发表评论