HighCharts中PieChart的实现
2016-01-05 16:39
190 查看
一、导入js文件
二、定义显示chart的div
三、写script
<span style="font-size:18px;"><span style="background-color: rgb(204, 204, 204);"><span style="font-size:18px;color:#000099;"><script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/highcharts.js"></script></span></span></span>
二、定义显示chart的div
<span style="font-size:18px;"><span style="background-color: rgb(204, 204, 204);"><span style="font-size:18px;color:#000099;"><div id="pieChart"></div></span></span></span>
三、写script
<span style="font-size:18px;"><span style="background-color: rgb(204, 204, 204);"><span style="font-size:18px;color:#000099;"><script type="text/javascript"> $(function() { $('#pieChart').highcharts({ chart: { ploatBackgroudColor:null, plotBorderWidth: null, plotShadow: false }, title: { text: '用户评分偏好' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>' }, credits: { enabled:false }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000', connectorColor: '#000', format: '<b>{point.name}</b>:{point.percentage:.2f} %' } } }, series: [{ type: 'pie', name:'评分比例', data: [ ['评分1',10], ['评分2',20], ['评分3',40], ['评分4',70] ] }] }); }); </script></span></span></span>说明:此处的data数据一般是从后台中取到的,可以通过<%= xxx%>来获取,比如<%=application.getAttribute("Rate-1")%>
相关文章推荐
- 新词发现初研究
- Android 内存管理 &Memory Leak & OOM 分析
- 在JAVA中如何连接SQL Server数据库
- ios开发一般思路
- static和extern与变量
- 如何从第三方应用下载广播电台的缓存节目内容
- 关于PackageInfo、ApplicationInfo、ActivityInfo、ResolveInfo四种信息类的区别之我见
- 《swift2.0 官方教程中文版》 第2章-24访问控制
- Objective-c编码规范
- 批量move table\者重建索引
- android 利用一个TextView实现两行并且每行的字体大小和颜色各异
- 简易购物车
- 转:值得推荐的C/C++框架和库(真的很强大)
- 首先的在最上面加上aop和tx 命名空间
- 沉浸式状态栏
- AutoCompleteTextView使用
- jquery简单实现表单提交后的需要等待效果
- web网站发布(本机vs2012 win7 64位)
- MySQL 5.7 并行复制实现原理与调优
- java.toString() ,(String),String.valueOf的区别