您的位置:首页 > 其它

Highcharts 饼图数值显示在图形上

2015-08-10 13:17 441 查看
1.引用js文件

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>

<script src="/global/plugins/highcharts/highcharts.js" type="text/javascript"></script>
<script src="/global/plugins/highcharts/highcharts-3d.js" type="text/javascript"></script>
<!-- <script src="/global/plugins/highcharts/themes/grid.js" type="text/javascript"></script>-->
<script src="/global/plugins/highcharts/modules/exporting.js" type="text/javascript"></script>

2.主体部分

<div id="container" style="min-width:400px;height:400px"></div>

$(function () {

$(document).ready(function () {

// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: '数值显示在图形区域'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -30,
format:'<b>{point.y}</b>',

},
showInLegend: true

}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
type: 'pie',
name: '占比',
distance: -10,
data: [
['Firefox',   45.0],
['IE',       26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}
]
}]
});
});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: