纯js绘制饼图(基于wz_jsgraphics.js)

最新推荐文章于 2025-05-27 13:40:25 发布

原创最新推荐文章于 2025-05-27 13:40:25 发布 · 6.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#constructor #div #download #function #library #spring

Javascript 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种利用wz_jsgraphics.js库在网页上绘制饼图的方法。通过具体实例展示了如何定义饼图数据并将其渲染到指定的HTML元素中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因项目需要，研究了一下怎么在页面上用js绘制饼图. 发现wz_jsgraphics.js真的很不错，而且优化效果良好。

运行妈的 csdn好东西做不出来，干坏事还可以。现在点运行好像不行了。

<html> <head> <title>js pie chart</title> </head> <body> 更多代码就在<a href="http://blog.youkuaiyun.com/sunxing007">http://blog.youkuaiyun.com/sunxing007</a> <br /><br /><br /><br /> <br /><br /><br /> <br /><br /> <div id="myCanvas" name="myCanvas" style="position: relative;padding: 5px; left: 100px;border: solid red 1px; width: 400px;"></div> </body>  <script type="text/javascript" src="wz_jsgraphics.js"></script> <script type="text/javascript"> /** * Notice! * Author: sunxing007@tom.com * * This js script used to generate pie chart in web page. * It based on wz_jsgraphics.js, this is an open source js * graphic library and it's avaliable at * http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm */ /** * class PieChart * canvas: constructor parameter, a div element where to draw this chart * data: constructor parameter, the data used to generate chart, * the format should be like this: * [{item: 'Spring Season', value: 2000},{item: 'Summer Season', value: 3500},{...}, ....], */ //helper function function $(id){return document.getElementById(id)} //check if user download the wz_jsgraphics.js. if(typeof(jsGraphics)=='undefined'){ alert('You do not download wz_jsgraphics.js yet,/nPlease goto http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm/nand download the js graphics library first./nPlease note the import statement/<script type="text/javascript" src="wz_jsgraphics.js"/>/</script/>'); } function PieChart(canvas, data){ this.canvas = canvas; this.data = data; } PieChart.COLORS = ['red', 'green', 'yellow', 'blue', 'pink', 'purple']; PieChart.prototype.render = function(){ var totalValue = 0; for(var i=0; i<this.data.length; i++){ var div = document.createElement('div'); div.style.width = 16; div.style.fontSize = 1; div.style.height = 16; div.style.styleFloat = 'left';/** important **/ div.style.backgroundColor = PieChart.COLORS[i]; div.style.marginLeft = 30; div.style.border = 'solid black 1px'; $(this.canvas).appendChild(div); //var txt = document.createTextNode(this.data[i].item); //span.innerText = this.data[i].item; var div = document.createElement('div'); div.innerText = this.data[i].item; div.style.styleFloat = 'left';/** important **/ $(this.canvas).appendChild(div); totalValue += this.data[i].value; } var _h = $(this.canvas).offsetHeight; $(this.canvas).style.height = _h + 200; var x = 20; var y = _h + 20; var w = 160; var h = 160; //jp.fillArc(X, Y, width, height, start-angle, end-angle); var jg = new jsGraphics(this.canvas); var startAngel = 0.0; for(var j=0; j<this.data.length; j++){ jg.setColor(PieChart.COLORS[j]); jg.fillArc(x, y, w, h, startAngel, startAngel + (this.data[j].value / totalValue)*360.0); startAngel += (this.data[j].value / totalValue)*360.0; } jg.paint(); } //test case var pie = new PieChart('myCanvas', [ {item: 'C/C++', value: 3500}, {item: 'Java', value: 5500}, {item: 'PHP', value: 4500}, {item: 'C++', value: 6500} ]); pie.render(); </script> </html>