实例如下:
!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;charset=GB 2312 '/title html js高图表绘制圆饼图表的简单实例/title脚本类型=' text/JavaScript ' src=' http : jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : high charts。js '/script/head dy div id=' content ' brbr!-DEMO开始-div id=' pie _ chart ' class=' chart _ combo '/div脚本类型=' text/JavaScript ' var图表;$(function(){ var total money=999 span style='空格: pre '/span var zcw=178 span style='空格: pre '/span var sycw=821 $(文档)。ready(function(){ chart=新高图表.图表({ chart : { renderto : }饼图,plotBackgroundColor: '白色',//背景颜色plotBorderWidth: 0,plotShadow: false },title: { text: '总车位: '总金额'剩余车位:' sycw,verticalAlign:'bottom ',y:-60 },tooltip: {//鼠标移动到每个饼图显示的内容pointformat :"{ point。名称} : {点。percent } %”,percentageDecimals: 1,format ter : function(){返回此。重点。说出‘:’的总钱*这个。重点。百分比/100;} },plot options : { pie : { size : ' 60% ',borderWidth: 0,allowPointSelect: true,cursor: '指针,data labels : { enabled : true,color: '#000 ',distance: -50,//通过设置这个属性,将每个小饼图的显示名称和每个饼图重叠style: {fontSize: '10px ',lineHeight: '10px'},formatter:函数(索引){ return ' span style=' color : # 0008 b;font-weight : bold ' '这个。重点。名称'/span ';} },padding:20 } },series: [{//设置每小个饼图的颜色、名称、百分比type: 'pie ',name: null,data: [ {name: '在场车辆,color:'#3DA9FF ',y:zccw },{name: '剩余车位,color:'#008FE0 ',y:sycw},]}]});});});/script/div/body/html(9500 . 163.com)
以上这篇html js高级图表绘制圆饼图表的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。