html+js+highcharts绘制圆饼图表的简单实例
下面我就为大家带来一篇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绘制圆饼图表的简单实例就是我分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我。
html+js+highcharts绘制圆饼图表的简单实例的更多相关文章
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- IOS 绘制圆饼图 简单实现的代码有注释
今天为大家带来IOS 绘图中圆饼的实现 .h文件 #import <UIKit/UIKit.h> @interface ZXCircle : UIView @end .m文件 #impor ...
- matplotlib绘制圆饼图
import matplotlib.pyplot as plt labels = ['Nokia','Samsung','Apple','Lumia'] values = [10,30,45,15] ...
- hibernate中.hbm.xml和注解方式自动生成数据表的简单实例(由新手小白编写,仅适用新手小白)
绝逼新手小白,so 请大神指点! 如果真的错的太多,错的太离谱,错的误导了其他小伙伴,还望大神请勿喷,大神请担待,大神请高抬贵嘴......谢谢. 好了,正题 刚接触ssh,今天在搞使用.hbm.xm ...
- require.js模块化管理和加载js(按需加载)简单实例教学
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- java自动生成表单简单实例
数据库表设置 tb_form(form表单) 字段 类型 约束 说明 Id Int 主键 主键 Formid Varchar2(20) 唯一 Form表单id的值 Action Varchar2(20 ...
- DWR(AJAX)+Highcharts绘制曲线图,饼图
基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...
- iOS圆饼图和圆环的绘制,并且添加引线
在开发中经常遇到统计之类的需求,特此封装了一个简单的圆饼图和圆环图,效果图如下 代码下载地址:https://github.com/minyahui/MYHCricleView.git
- 使用highcharts 绘制Web图表
问题描述: 使用highcharts 绘制Web图表 Highcharts说明: 问题解决: (1)安装Highcharts 在这些图表中,数据源是一个典型的JavaScrip ...
随机推荐
- k8s的namespace一直Terminating的完美解决方案
k8s的namespace一直Terminating的完美解决方案 在k8s集群中进行测试删除namespace是经常的事件,而为了方便操作,一般都是直接对整个名称空间进行删除操作. 相信道友们在进行 ...
- RFC 8684---TCP Extensions for Multipath Operation with Multiple Addresses
https://datatracker.ietf.org/doc/rfc8684/?include_text=1 TCP Extensions for Multipath Operation with ...
- 天啦噜!知道硬盘很慢,但没想到比 CPU L1 Cache 慢 10000000 倍
前言 大家如果想自己组装电脑的话,肯定需要购买一个 CPU,但是存储器方面的设备,分类比较多,那我们肯定不能只买一种存储器,比如你除了要买内存,还要买硬盘,而针对硬盘我们还可以选择是固态硬盘还是机械硬 ...
- uc浏览器手机版,页面图片不显示
uc浏览器手机版,有时候上面的轮播广告看不到 原因:uc浏览器会拦截所有带ad的标签 例如: <div id="adDiv"> <img src="/r ...
- MeteoInfoLab脚本示例:加载地图图层
应用最广泛的的地图数据应该是shape格式,网络上有很多免费下载资源.MeteoInfoLab中读取shape文件的函数是shaperead,参数即文件名,返回数据包含图形和属性信息的图层对象.矢量图 ...
- MeteoInfoLab脚本示例:线性拟合
MeteoInfoLab提供一个线性拟合函数linregress,参数是参与拟合的两个数据序列,返回拟合的斜率.截距和相关系数.有了上述拟合参数可以用polyval函数生成拟合数据(直线).然后可以将 ...
- day33 Pyhton logging 模块和包
一内容回顾 try/except try/except/else try/finally try/except try/except/finally try/except/else/finally 报 ...
- pmm-server监控mysql
https://blog.csdn.net/RunzIyy/article/details/104635680?utm_medium=distribute.pc_relevant.none-task- ...
- SELECT INTO与INSERT INTO SELECT用法
SELECT INTO SELECT INTO 语句从一个表复制数据,然后把数据插入到另一个新表中: -- 创建 Websites 的备份,这种写法没走索引导致全表扫描 SELECT * INTO W ...
- Python合集之Python开发环境在Windows系统里面搭建
在上一个合集里面我们了解到了Python的基础信息及学习了Python对我们有什么用处,那么今天我们来了解一下,Python的开发环境该如何搭建.(注:Python的开发环境可以在Windows.MA ...