实例如下 ：
<! 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> <v id = "content"> <br> <br> <br> <!-Demo start-<v div ID = "pie" pie "pie" <br> <br> <! $(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}, judul: {teks: '总车位:'+TotalMoney+'剩余车位:'+Sycw, Verticalalign: 'Bottom', y: -60}, tooltip: {// 鼠标移动到每个饼图显示的内容 pointFormat: '{point.name}: </{{// {pointFormat:' {point.name}: </{/{// {// {pointFormat: '{point.name}: </{/{// {// {// {pointFormat:' {point. 1, formatter: function () {return this.point.name+':'+TotalMoney*this.point.percentage/100; -50, // 通过设置这个属性 ， 将每个小饼图的显示名称和每个饼图重叠 gaya: {fontSize: '10px', lineHeight: '10px'}, formatter: function (index) {return '<span style = "color:#00008b; font -weight: bold">' + this.point.name + '</span>'; 'pie', null, data: [{name: '在场车辆', Color: '#3da9ff', y: zccw}, {name: '剩余车位', warna: '#008fe0', y: sycw},]}]}); </script> </div> </body> </html>以上这篇 html+js+highcharts 绘制圆饼图表的简单实例就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 ， 也希望大家多多支持武林网。