下面我就为大家带来一篇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绘制圆饼图表的简单实例的更多相关文章

  1. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  2. IOS 绘制圆饼图 简单实现的代码有注释

    今天为大家带来IOS 绘图中圆饼的实现 .h文件 #import <UIKit/UIKit.h> @interface ZXCircle : UIView @end .m文件 #impor ...

  3. matplotlib绘制圆饼图

    import matplotlib.pyplot as plt labels = ['Nokia','Samsung','Apple','Lumia'] values = [10,30,45,15] ...

  4. hibernate中.hbm.xml和注解方式自动生成数据表的简单实例(由新手小白编写，仅适用新手小白)

    绝逼新手小白,so 请大神指点! 如果真的错的太多,错的太离谱,错的误导了其他小伙伴,还望大神请勿喷,大神请担待,大神请高抬贵嘴......谢谢. 好了,正题 刚接触ssh,今天在搞使用.hbm.xm ...

  5. require.js模块化管理和加载js（按需加载）简单实例教学

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  6. java自动生成表单简单实例

    数据库表设置 tb_form(form表单) 字段 类型 约束 说明 Id Int 主键 主键 Formid Varchar2(20) 唯一 Form表单id的值 Action Varchar2(20 ...

  7. DWR(AJAX)+Highcharts绘制曲线图，饼图

    基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...

  8. iOS圆饼图和圆环的绘制，并且添加引线

    在开发中经常遇到统计之类的需求,特此封装了一个简单的圆饼图和圆环图,效果图如下 代码下载地址:https://github.com/minyahui/MYHCricleView.git

  9. 使用highcharts 绘制Web图表

    问题描述:     使用highcharts 绘制Web图表 Highcharts说明: 问题解决:     (1)安装Highcharts     在这些图表中,数据源是一个典型的JavaScrip ...

随机推荐

  1. 【题解】SP1812 【LCS2 - Longest Common Substring II 】

    \(\text{Suffix Tree:}\)我来啦我来啦 \(\text{Solution:}\) 题目要求求好几个串串的\(\text{LCS.}\) 由于串串的数量并不多,所以我们把它们塞到一个 ...

  2. 十一长假我肝了这本超硬核PDF，现决定开源！！

    写在前面 在 [冰河技术] 微信公众号中的[互联网工程]专题,更新了不少文章,有些读者反馈说,在公众号中刷 历史文章不太方便,有时会忘记自己看到哪一篇了,当打开一篇文章时,似乎之前已经看过了,但就是不 ...

  3. shell-的特殊变量-难点理论

    一:shell的特殊变量-难点理论  1. $*和$@的区别例子     $* 将所有的命令行所有参数视为单个字符串,等同于"$1$2$3"     $@ 将命令行每个参数视为单独 ...

  4. MeteoInfoLab脚本示例：OMI Grid HDF数据

    OMI卫星格点数据的例子,全球臭氧柱总量分布.脚本程序: #Add data file folder = 'D:/Temp/hdf/' fns = 'OMI-Aura_L3-OMTO3e_2005m1 ...

  5. 简单的Linux下的socket通信，小程序，方便以后查看。

    首先是我的一个出错提示的头文件<myerr.h>,自从用了根本停不下来啊!!! #ifndef _MYERR_H_ #define _MYERR_H_ #include <stdio ...

  6. 基于python实现单链表代码

    1 """ 2 linklist.py 3 单链表的构建与功能操作 4 重点代码 5 """ 6 7 class Node: 8 " ...

  7. lumen-ioc容器测试 (6)

    lumen-ioc容器测试 (1) lumen-ioc容器测试 (2) lumen-ioc容器测试 (3) lumen-ioc容器测试 (4) lumen-ioc容器测试 (5) lumen-ioc容 ...

  8. python保存图片

    #coding=utf-8 import requests url ="https://images.pexels.com/photos/1181767/pexels-photo-11817 ...

  9. 【线上排查实战】AOP切面执行顺序你真的了解吗

    前言 忙,是我这个月的主旋律,也是我频繁鸽文章的接口----蛮三刀把刀 公司这两个月启动了全新的项目,项目排期满满当当,不过该学习还是要学习.这不,给公司搭项目的时候,踩到了一个Spring AOP的 ...

  10. xib使用

    xib和storyboard都可以建立应用程序的视图.他们的主要区别在于,xib用于创建应用程序的局部视图,storyboard用于创建应用程序的整体视图. xib是storyboard的前身. xi ...