[Chart:Pie]????

2014-03-10 11:15:41by ???

拱形饼图

说明

这篇文章介绍的是如何制作拱形饼图

思考

如下图是浏览器的市场份额,考虑以下几个重点

  1. 默认的饼图的圆弧角度是0°到360°,图中的拱形圆弧的角度是多少。

  2. 图中有个内圆弧,如何实现。

  3. 数据标签的特效如何实现,如何定位在饼图上而不是默认的饼图外。

代码

                
<a:dataSets>
    <a:dataSet id="ds">
        <a:datas>
            <a:record browser="Firefox" shares="45"/>
            <a:record browser="IE" shares="26.8"/>
            <a:record browser="Chrome" shares="12.8"/>
            <a:record browser="Safari" shares="8.5"/>
            <a:record browser="Opera" shares="6.2"/>
            <a:record browser="Others" shares="0.7"/>
        </a:datas>
        <a:fields>
            <a:field name="browser" prompt="浏览器"/>
            <a:field name="shares" datatype="float"  prompt="份额"/>
        </a:fields>
    </a:dataSet>
</a:dataSets>
<a:chart bindTarget="ds" plotBackgroundColor="null" plotBorderWidth="null" plotShadow="false" type="pie">
    <a:title text="浏览器的市场份额" align="center" verticalAlign="middle" y="50" />
    <a:tooltip pointFormat="{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;"/>
    <a:plotOptions>
        <a:pie startAngle="-90" endAngle="90" center="'50%','70%'" innerSize="50%">
            <a:dataLabels distance="-50" enabled="true" style="fontWeight:bold;color:white;text-shadow:0px 1px 2px black"/>
        </a:pie>
    </a:plotOptions>
    <a:xAxis>
        <a:xAxi name="browser"/>
    </a:xAxis>
    <a:yAxis>
        <a:yAxi name="shares"/>
    </a:yAxis>
</a:chart>

注释

  1. 标签a:pie中的startAngle和endAngle属性指定了圆弧的角度。center属性指定了圆心的位置。innerSize属性指定了内圆弧的尺寸。

  2. a:dataLabels的distance属性是数据标签的定位属性。

Demo
  1. ????
Attachments
  1. ????.rar

Comments

1 Responses to the article
  1. 250766425@qq.com 留言于:2017年03月23日 10:49
    这个代码有问题啊,还有饼图不支持BM数据源,啥情况?
发表评论