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>
<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 } ] }] }); }); });
相关文章推荐
- 高德地图报错:BaseMapView initWithFrame exception
- Log4j最佳实践
- idea自动生成serialVersionUID
- HDU 1159(Common Subsequence)最长公共子序列
- CentOS7.0部署Docker
- C++中随机函数rand()和srand()的用法
- C语言基础小知识
- Linked List Cycle
- 10令人惊叹的模型的影响HTML5应用程序及源代码
- 在业务中找痛点
- LCS-基础
- 浅谈管理系统操作日志设计(附操作日志类)
- 自定义ViewGroup控件(二)----->流式布局进阶(二)
- 在业务中找痛点
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
- 关于JSP源码泄漏问题的总结分析
- 银行取款机c++实现
- 探索React生态圈
- BZOJ 3367: [Usaco2004 Feb]The Big Game 球赛( dp )
- Thinkphp源码分析之类的自动加载