html+js+highcharts绘制圆饼图表的简单实例
2024-08-31 22:34:42
下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例。我觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随我过来看看吧
实例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> <title>html+js+highcharts绘制圆饼图表的简单实例</title> <script type= "text/javascript" src= "jquery-1.4.2.min.js" ></script> <script type= "text/javascript" src= "highcharts.js" ></script> </head> <body> <div id= "content" > <br><br><br> <!--DEMO start--> <div id= "pie_chart" class= "chart_combo" ></div> <script type= "text/javascript" > var chart; $( function () { var totalMoney=999 <span style= "white-space:pre" > </span> var zccw=178 <span style= "white-space:pre" > </span> var sycw=821 $(document).ready( function () { chart = new Highcharts.Chart({ chart: { renderTo: 'pie_chart' , plotBackgroundColor: 'white' , //背景颜色 plotBorderWidth: 0, plotShadow: false }, title: { text: '总车位:' +totalMoney + ' 剩余车位:' + sycw , verticalAlign: 'bottom' , y:-60 }, tooltip: { //鼠标移动到每个饼图显示的内容 pointFormat: '{point.name}: <b>{point.percentage}%</b>' , percentageDecimals: 1, formatter: function () { return this .point.name+ ':' +totalMoney* this .point.percentage/100; } }, plotOptions: { pie: { size: '60%' , borderWidth: 0, allowPointSelect: true , cursor: 'pointer' , dataLabels: { enabled: true , color: '#000' , distance: -50, //通过设置这个属性,将每个小饼图的显示名称和每个饼图重叠 style: { fontSize: '10px' , lineHeight: '10px' }, formatter: function (index) { return '<span style="color:#00008B;font-weight:bold">' + this .point.name + '</span>' ; } }, padding:20 } }, series: [{ //设置每小个饼图的颜色、名称、百分比 type: 'pie' , name: null , data: [ {name: '在场车辆' ,color: '#3DA9FF' ,y:zccw}, {name: '剩余车位' ,color: '#008FE0' ,y:sycw}, ] }] }); }); }); </script> </div> </body> </html> |
以上这篇html+js+highcharts绘制圆饼图表的简单实例就是我分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我。
最新文章
- Multiple View Geometry in Computer vision 1.1节部分翻译
- Java 线程池学习
- 使用NSData来加载文件
- SQL语句添加,删除主键
- UITextField成为第一响应者
- Get Total Sum Using Multithread Programming
- java学习笔记03-基本语法
- SS+FinalSpeed终极教程[转]
- 利用python中的gensim模块训练和测试word2vec
- 2019.3.15 关于IE
- Linux CPU Hotplug CPU热插拔
- 【虚拟化实战】Cluster设计之一资源池
- React(0.13) 组件的组合使用
- centos 系统下查看时间时区以及修改
- 求助大佬3——hash姿势
- VM虚拟机和主机互传文件,使用xshell连接Ubuntu
- Gwt第三方组件、框架介绍
- 【bzoj1875】[SDOI2009]HH去散步 矩阵乘法
- mysql慢查询工具
- 分布式数据库以及OS
热门文章
- 【题解】CF1426E Rock, Paper, Scissors
- npm包管理器报错-npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/@XXX(over 30000ms)
- MLHPC 2018 | Aluminum: An Asynchronous, GPU-Aware Communication Library Optimized for Large-Scale Training of Deep Neural Networks on HPC Systems
- 部署MongoDB-4.2.7
- vue的二级联动,数据是从php获取到的
- 如何实现文章AI伪原创?
- mysql5.7.23 解压版 密码忘记了咋办??
- macvlan几种模式
- Git之多人协同开发
- day44 Pyhton 数据库Mysql