html+js+highcharts绘制圆饼图表的简单实例


Posted in Javascript onAugust 04, 2016

实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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绘制圆饼图表的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
asm.js使用示例代码
Nov 28 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
javascript基础知识讲解
Jan 11 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 #Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 #Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 #Javascript
JS 数字转换为大写金额的简单实例
Aug 04 #Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 #Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 #Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 #Javascript
You might like
php 全局变量范围分析
2009/08/07 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
html读出文本文件内容
2007/01/22 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue实现记事本功能
2019/06/26 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
Python中pygame安装方法图文详解
2015/11/11 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
党校培训自我鉴定
2014/02/01 职场文书
演讲稿格式
2014/04/30 职场文书
社团活动总结书
2014/06/27 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
工程部部长岗位职责
2015/02/12 职场文书
幼师求职自荐信
2015/03/26 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python