www.rgraph.net 下载 RGraph.minified-2018-08-14.zip
解压后,将目录 libraries 简化为: lib
饼图例子: RGraph/svg_pie1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RGraph : SVG Pie charts API </title>
<script src="./lib/RGraph.svg.common.core.js"></script>
<script src="./lib/RGraph.svg.common.key.js"></script>
<script src="./lib/RGraph.svg.common.tooltips.js"></script>
<script src="./lib/RGraph.svg.pie.js"></script>
</head>
<body>
<div style="width: 850px; height: 350px" id="chart-pie"></div>
<div id="tab"></div>
<script>
var data = [20,13.43,2.83,4.24,7.42,13.43,38.65];
var labels = ['Miscellaneous','Cooking','Office equipment','Refridgeration','Cooling','Ventilation','Lighting'];
var tips = new Array();
for (var i=0; i<data.length; i++) {
tips[i] = labels[i] + ', ' + data[i] + '%';
}
var colors = ['#EC0033','#A0D300','#FFCD00','#00B869','#999999','#FF7300','#004CB0'];
var pie = new RGraph.SVG.Pie({
id: 'chart-pie',
data: data,
options: {
labels: labels,
tooltips: tips,
colors: colors,
strokestyle: 'white',
linewidth: 2,
shadow: true,
shadowOffsetx: 2,
shadowOffsety: 2,
shadowBlur: 3,
exploded: 7
}
}).draw();
// create table
var table = document.createElement("table");
table.border = "1"; // table.width = "100%";
var tb = document.createElement("tbody");
table.appendChild(tb);
var tr,td;
tr = tb.insertRow(0); // 创建第一行
for(var j=0; j<labels.length; j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = labels[j];
td.align = "center";
}
tr = tb.insertRow(tb.rows.length); // 创建一行
for(var j=0; j<data.length; j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = data[j] +'%';
td.align = "center";
}
document.querySelector("#tab").appendChild(table);
</script>
</body>
</html>
分享到:
相关推荐
SVG和Canvas绘图:SVG和Canvas的性能优化技巧.docx
使用场景:很多时候下载的图片都是SVG矢量文件,不适用于需要 ico图片 的场景。 举例说明:比如,iconfont网站上下载的图标资源。 功能描述:此程序使用Python编写 1. 可以将 单个SVG图片文件 转换为 【128/64/48/32...
SVG6000 用户手册 V3.2 本手册是星网数码 SVG6000 用户手册 V3.2 的知识点总结,涵盖了 SVG6000 的系统概述、硬件配置、软件配置、短信管理、业务特性说明等方面的知识点。 系统概述 * 系统简介:SVG6000 是一款...
纯Java动态生成 SVG 饼图与 JFreeChart 超强功能生成 SVG 图表 在本文中,我们将探讨如何使用 Java 生成 SVG 饼图,并使用 JFreeChart 生成 SVG 图表。我们还将讨论 JFreeChart 的一些缺陷和解决方案。 一、Java ...
SVG和Canvas绘图:SVG元素和属性详解.docx
SVG和Canvas绘图:SVG与Canvas的事件处理.docx
SVG和Canvas绘图:SVG动画基础与关键帧.docx
SVG和Canvas绘图:SVG滤镜和Canvas图像处理.docx
SVG和Canvas绘图:SVG和Canvas绘图基础介绍.docx
SVG和Canvas绘图:SVG和Canvas的文本处理.docx
1104MTE logo png:svg.zip
SVG和Canvas绘图:SVG和Canvas的高级交互技术.docx
SVG和Canvas绘图:SVG和Canvas在网页设计中的应用.docx
SVG和Canvas绘图:SVG和Canvas的未来趋势与新技术.docx
SVG和Canvas绘图:SVG和Canvas的跨平台兼容性问题.docx
在本案例中,我们将讨论如何使用SVG来实现一个统计饼图。 饼图是一种常见的数据可视化工具,它通过不同大小的扇形来表示各部分占整体的比例。在SVG中,我们可以利用`<svg>`元素作为画布,然后通过`<path>`或`...
SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它被广泛应用于Web开发中,因为它可以无损地缩放,同时提供了丰富的图形绘制和动画功能。本压缩包"Svg-:Svg动画系列demo合集"显然是一个包含SVG动画...
### SVG基础知识及应用详解 #### 一、SVG简介 **SVG**(Scalable Vector Graphics,可缩放矢量图形)是一种基于XML的标准图形格式,由W3C组织制定。SVG允许开发者创建高质量的矢量图像,这些图像可以被放大、缩小...
SVG(Scalable Vector Graphics)是一种开放标准的矢量图形描述语言,由W3C(万维网联盟)制定,特别适用于网络环境。它基于XML(eXtensible Markup Language),使得图像数据可以用文本形式存储,便于编辑、搜索和...
SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、移动应用和图形用户界面中。SVG的核心优势在于它的可缩放性,无论放大多少倍,图像都能保持清晰,不会出现像素化的现象。在...