Highcharts 饼图数值显示在图形上
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 } ] }] }); }); });