运用js绘制SVG图片
/*** Create an <svg> element and draw a pie chart into it.* 创建一个<svg>元素,并在其中绘制一个饼状图* Arguments:* 参数:* data: an array of numbers to chart, one for each wedge of the pie.* data:用于绘制数据的类型数组,数组的每一项都表示饼状图的一个部分* width,height: the size of the SVG graphic, in pixels* width,height:图形的长宽* cx, cy, r: the center and radius of the pie* cx, cy, r: 圆心和半径* colors: an array of HTML color strings, one for each wedge* colors: 包含颜色的数组,每种颜色代表了每个部分的颜色* labels: an array of labels to appear in the legend, one for each wedge* labels: 一个标签数组,每个部分的信息说明* lx, ly: the upper-left corner of the chart legend* Returns: * lx,ly: 饼状图的左上角* An <svg> element that holds the pie chart.* 一个保存<svg>的元素* The caller must insert the returned element into the document.* 调用者必须将返回的元素插入到文档中*/
function pieChart(data, width, height, cx, cy, r, colors, labels, lx, ly) {// This is the XML namespace for svg elementsvar svgns = "http://www.w3.org/2000/svg"; // Create the <svg> element, and specify pixel size and user coordinatesvar chart = document.createElementNS(svgns, "svg:svg");chart.setAttribute("width", width);chart.setAttribute("height", height);chart.setAttribute("viewBox", "0 0 " + width + " " + height);// Add up the data values so we know how big the pie isvar total = 0;for(var i = 0; i < data.length; i++) total += data[i];// Now figure out how big each slice of pie is. Angles in radians.var angles = []for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*Math.PI*2;// Loop through each slice of pie.startangle = 0;for(var i = 0; i < data.length; i++) {// This is where the wedge endsvar endangle = startangle + angles[i];// Compute the two points where our wedge intersects the circle// These formulas are chosen so that an angle of 0 is at 12 o'clock// and positive angles increase clockwise.var x1 = cx + r * Math.sin(startangle);var y1 = cy - r * Math.cos(startangle);var x2 = cx + r * Math.sin(endangle);var y2 = cy - r * Math.cos(endangle);// This is a flag for angles larger than than a half circle// It is required by the SVG arc drawing componentvar big = 0;if (endangle - startangle > Math.PI) big = 1;// We describe a wedge with an <svg:path> element// Notice that we create this with createElementNS()var path = document.createElementNS(svgns, "path");// This string holds the path detailsvar d = "M " + cx + "," + cy + // Start at circle center" L " + x1 + "," + y1 + // Draw line to (x1,y1)" A " + r + "," + r + // Draw an arc of radius r" 0 " + big + " 1 " + // Arc details...x2 + "," + y2 + // Arc goes to to (x2,y2)" Z"; // Close path back to (cx,cy)// Now set attributes on the <svg:path> elementpath.setAttribute("d", d); // Set this path path.setAttribute("fill", colors[i]); // Set wedge colorpath.setAttribute("stroke", "black"); // Outline wedge in blackpath.setAttribute("stroke-width", "2"); // 2 units thickchart.appendChild(path); // Add wedge to chart// The next wedge begins where this one endsstartangle = endangle;// Now draw a little matching square for the keyvar icon = document.createElementNS(svgns, "rect");icon.setAttribute("x", lx); // Position the squareicon.setAttribute("y", ly + 30*i);icon.setAttribute("width", 20); // Size the squareicon.setAttribute("height", 20);icon.setAttribute("fill", colors[i]); // Same fill color as wedgeicon.setAttribute("stroke", "black"); // Same outline, too.icon.setAttribute("stroke-width", "2");chart.appendChild(icon); // Add to the chart// And add a label to the right of the rectanglevar label = document.createElementNS(svgns, "text");label.setAttribute("x", lx + 30); // Position the textlabel.setAttribute("y", ly + 30*i + 18);// Text style attributes could also be set via CSSlabel.setAttribute("font-family", "sans-serif");label.setAttribute("font-size", "16");// Add a DOM text node to the <svg:text> elementlabel.appendChild(document.createTextNode(labels[i]));chart.appendChild(label); // Add text to the chart}return chart;
}
运用js绘制SVG图片相关推荐
- HTML+CSS+JS实现 ❤️svg图片透明层文本显示❤️
- 【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能 前言 概述 技术介绍 实现过程 插件安装 引用组件 初始化组件 实现效果 简单理解 使用d3创建一个svg 在svg中提添 ...
- ros机器人写字,svg图片绘制,二三阶贝塞尔计算公式转代码
ros机器人写字,svg图片绘制,二三阶贝塞尔 # ------------------------- 绘制二阶贝塞尔 -------------------------#def QuadraticB ...
- Canvas画布、SVG图片
Canvas 一.canvas 1.<canvas>标签:画布标签 (height,width,半透明),本身不具备绘图能力,可以通过脚本(通常指js)来实现 width:设置画布宽度,默 ...
- avalon.js实践 svg地图配置工具
MVVM模式,在很多复杂交互逻辑下面,有很大的优势.现在相关的框架也很多,现在项目中使用了avalon.js,选择它的原因,是兼容性的考虑,当然也要支持下国内开发大牛,至于性能方面的,没有实际测试过, ...
- svg图片在vue脚手架vue-cli怎么使用
第一种 使用vue2-svg-icon npm install vue2-svg-icon --save-dev 下载之后在mian.js引入 名字可以随便起,这里我起icon 引入svg资源 这时注 ...
- canvas 元素绑定事件_绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...
- PHP3d地球,three.js绘制地球、飞机与轨迹的效果示例
对于three.js不太熟悉的朋友们可以参考这篇文章,threejs官网:https://threejs.org/ 首先我们来看下要实现的效果 这个缩小后的图片,下面我们来看下近距离的动态效果.. 效 ...
- html5 svg组态图,绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...
最新文章
- LeetCode简单题之二叉树的最大深度
- R语言可视化散点图(scatter plot)图、为图中的部分数据点添加标签、ggrepel包来帮忙
- stm32中如何进行printf重定向用于串口调试输出
- JDK/JAVA 13正式版发布,此版本带来了以下几大新特性
- php listview,ListView简单实用
- return 与 exit()的区别--return退出本函数,exit()退出整个程序
- 光纤收发器故障导致不能上网该如何解决?
- 光端机与光纤收发器的区别
- 收藏 | 计算机视觉中的自注意力
- 叮!锦鲤素材到货啦~
- [Swift]LeetCode897. 递增顺序查找树 | Increasing Order Search Tree
- 数据库索引键uk_数据库SQLServer
- kubernetes实践分享
- 恩智浦imx8qxp-mek的 device Tree 结构
- netty 学习笔记(一)
- TensorFlow——decay设置
- 中标麒麟服务器性能怎么样,中标麒麟Linux系统的性能分析及工具(74页)-原创力文档...
- Linux下查找归档的内容
- 读书笔记-干法-热爱工作天道酬勤
- CSS 样式表及选择器
热门文章
- 【夯实Dubbo】Dubbo的核心特性
- 〖ChatGPT实践指南 - 零基础扫盲篇③〗- 开始使用 ChatGPT 并访问 OpenAI 获取 API Keys
- 如何进行服务器备份操作系统,如何进行服务器备份操作系统
- WEB前端网页设计 HTML网页代码 - 表单参数
- glibc 知:手册21:日期和时间
- IP协议以及IP地址分类
- Django 浏览器报错 MIME 类型(“text/html”)不匹配(X-Content-Type-Options: nosniff)
- 大师系列彼•奇层查股
- SOC RTC时钟——为什么实时时钟的晶振都是32.768KHZ呢?
- 英伟达两个最新元宇宙布局