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

選擇amCharts制作餅圖也是一個很棒的選擇，因為amCharts的餅圖可以自動適配小容器，甚至是一個200x200px 的容器，他也是i可以自動適應的。

• 下載amCharts

讓我們來看看下面的例子：

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

2、我們還可以設置半徑，讓圖表變得更大些，圖表大小很合適，但是標簽超出，被截斷

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

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

這里有個例子：

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

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

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

4、最后結果如下圖，書籍標簽沒有被截斷但是超出了。

5、無邊框的效果

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>