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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
jquery实现用户打分评分特效
May 28 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
你应该知道的python列表去重方法
2017/01/17 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
详解Python核心对象类型字符串
2018/02/11 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python常用库大全及简要说明
2020/01/17 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
应聘医药销售自荐书范文
2014/02/08 职场文书
优秀员工评语
2014/02/10 职场文书
公民授权委托书范本
2014/09/17 职场文书
世界地球日活动总结
2015/02/09 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS