有時(shí)候需要用餅圖做數(shù)據(jù)分析，而展示分布數(shù)據(jù)，使用餅圖是一個(gè)相當(dāng)棒的方式，你不用說(shuō)太多，直接在餅圖中顯示，就能把信息傳達(dá)清楚。

選擇amCharts制作餅圖也是一個(gè)很棒的選擇，因?yàn)閍mCharts的餅圖可以自動(dòng)適配小容器，甚至是一個(gè)200x200px 的容器，他也是i可以自動(dòng)適應(yīng)的。

• 下載amCharts

讓我們來(lái)看看下面的例子：

1、將餅圖插入200px 寬的邊欄

2、我們還可以設(shè)置半徑，讓圖表變得更大些，圖表大小很合適，但是標(biāo)簽超出，被截?cái)?/p>

邊欄內(nèi)邊距可以調(diào)整，這里有幾個(gè)技巧：

• 使圖表容器變大
• 使用新div，讓圖表和內(nèi)邊距適應(yīng)

這里有個(gè)例子：

如上圖，大容器包含小容器。

3、我們需要一個(gè)CSS實(shí)現(xiàn)它：

#chartwrapper {
position: relative;
width: 200px;
height: 200px;
}
#chartdiv {
position: absolute;
top: -30px;
left: -30px;
width : 260px;
height : 260px;
}

4、最后結(jié)果如下圖，書(shū)籍標(biāo)簽沒(méi)有被截?cái)嗟浅隽恕?/p>

5、無(wú)邊框的效果

6、完整的JS代碼：

var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"dataProvider": [
{
"country": "Lithuania",
"litres": 501.9
},
{
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}],
"valueField": "litres",
"titleField": "country",
//"radius": "28%",
"labelRadius": 4,
"labelText": "[[percents]]%"
});

CSS

body {
font-family: Verdana;
font-size: 12px;
padding: 30px;
}
p {
margin-bottom: 20px;
}
#sidebar {
width: 200px;
background: #eee;
float: right;
margin-left: 30px;
}
#sidebar h2 {
font-size: 18px;
text-align: center;
background: #dfdfdf;
border-bottom: 2px solid #fff;
padding: 10px;
}
#sidebar p {
padding: 10px;
margin: 0;
}
#chartwrapper {
position: relative;
width : 200px;
height : 200px;
background: #fff;
/*border: 1px dotted #c00;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chartdiv {
position: absolute;
top: -30px;
left: -30px;
width : 260px;
height : 260px;
/*border: 1px dotted #0c0;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

HTML

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/themes/none.js"></script>

<div id="sidebar">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sapien at purus lacinia, ac accumsan justo consequat. </p>
<div id="chartwrapper">
<div id="chartdiv"></div>
</div>
<p>Curabitur eget sollicitudin nisi. Curabitur dapibus at mi a elementum. Nullam ut nisi diam. Nulla ac enim feugiat, imperdiet dolor a, commodo ipsum.</p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sapien at purus lacinia, ac accumsan justo consequat. Curabitur eget sollicitudin nisi. Curabitur dapibus at mi a elementum. Nullam ut nisi diam. Nulla ac enim feugiat, imperdiet dolor a, commodo ipsum. Etiam convallis sem nisl, sagittis dignissim sapien viverra at. Integer pharetra dolor ut odio fringilla, quis porta orci adipiscing. Donec tellus arcu, luctus et vulputate nec, gravida eu ipsum. In eget nunc eu enim tincidunt posuere. Ut auctor neque ligula, et posuere arcu egestas in. Integer malesuada viverra lectus, quis ullamcorper neque tristique eu. Ut in dui ac purus placerat lacinia sed ut enim. Nunc leo ante, faucibus nec mollis vitae, placerat in odio. Nam id augue sit amet tortor rutrum vehicula et in erat. Donec ullamcorper lectus non nisi convallis, eget rutrum risus tempor.</p>

<p>Cras mollis sem turpis, feugiat laoreet est venenatis nec. Phasellus dignissim, elit in hendrerit condimentum, mi nulla facilisis risus, non viverra leo ipsum et mauris. Pellentesque volutpat sem id luctus pharetra. Donec varius pulvinar ipsum eget fermentum. Vestibulum id eleifend massa, quis pharetra nisi. Cras malesuada lobortis arcu, in imperdiet tellus. Fusce eget lacinia velit. Duis congue hendrerit pellentesque. Sed suscipit bibendum massa, id posuere lacus. Etiam aliquet neque non elit luctus congue. Nunc purus sapien, vestibulum ut gravida vel, elementum egestas turpis. Suspendisse a lacinia ante. Quisque volutpat orci metus, eu cursus mauris malesuada vitae. Donec ac nisi gravida, scelerisque quam et, commodo mi.</p>

<p>Aenean scelerisque mi vel ligula mattis, eget pharetra elit interdum. Pellentesque feugiat nulla sed metus imperdiet consequat. Curabitur convallis nisi ornare ultricies fringilla. Sed rhoncus odio magna, convallis vulputate metus consequat et. Donec laoreet, velit sed congue auctor, leo sapien pulvinar sapien, sed venenatis mauris sem at velit. Ut et ipsum libero. Mauris vel metus nec lectus ultricies interdum vel sed turpis. In hac habitasse platea dictumst.</p>