www.rgraph.net 下载 RGraph.minified-2018-08-14.zip
解压后,将目录 libraries 简化为: lib
rose图例子: RGraph/svg_rose1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RGraph : SVG rose 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.rose.js"></script>
</head>
<body>
<div style="width: 500px; height: 500px" id="chart-container"></div>
<div id="tab"></div>
<script>
var keys = ['周一','周二','周三','周四','周五','周六','周日'];
var data = [8,6,4,3,8,6,3];
var tips = ['Alf','Bertie','Charlie','Doug','Edgar','Frankie','Gary'];
var colors = ['blue','green','red','#aaa','black','brown','pink'];
var rose = new RGraph.SVG.Rose({
id: 'chart-container',
data: data,
options: {
tooltips: tips,
colors: colors,
colorsSequential: true,
//backgroundGridRadialsCount: 0,
linewidth: 2,
margin: '3deg',
key: keys,
keyOffsety: 455
}
}).draw().on('tooltip', function (obj)
{
var tooltip = RGraph.SVG.REG.get('tooltip');
var colors = rose.properties.colors;
tooltip.style.border = '4px solid ' + colors[tooltip.__index__]
});
RGraph.SVG.tooltips.style.backgroundColor = 'white';
RGraph.SVG.tooltips.style.color = 'black';
RGraph.SVG.tooltips.style.fontWeight = 'bold';
RGraph.SVG.tooltips.style.boxShadow = 'none';
// 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<keys.length; j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = keys[j];
td.align = "center";
}
tr = tb.insertRow(tb.rows.length); // 创建一行
for(var j=0; j<tips.length; j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = tips[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...
SVG和Canvas绘图:SVG和Canvas绘图基础介绍.docx
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
SVG6000 用户手册 V3.2 本手册是星网数码 SVG6000 用户手册 V3.2 的知识点总结,涵盖了 SVG6000 的系统概述、硬件配置、软件配置、短信管理、业务特性说明等方面的知识点。 系统概述 * 系统简介:SVG6000 是一款...
SVG和Canvas绘图:SVG和Canvas在网页设计中的应用.docx
SVG和Canvas绘图:SVG和Canvas的未来趋势与新技术.docx
SVG和Canvas绘图:SVG和Canvas的跨平台兼容性问题.docx
1104MTE logo png:svg.zip
5. 下载SVG图片: - 要从网络下载SVG,首先需要将其作为字符串或字节数组获取,然后使用`SVG.parse()`方法解析为SVG对象,最后通过`Glide`加载到ImageView中。 - 示例代码: ```java String svgContent = ...
SVG(Scalable Vector Graphics)是一种开放标准的矢量图形描述语言,由W3C(万维网联盟)制定,特别适用于网络环境。它基于XML(eXtensible Markup Language),使得图像数据可以用文本形式存储,便于编辑、搜索和...
1. SVG矢量图的优势: - 无损缩放:SVG文件在放大或缩小时不会出现像素化,因此无论是在小屏幕设备还是大屏幕上都能保持清晰。 - 小巧高效:SVG文件通常比位图(如JPEG、PNG)更小,降低了数据传输和存储需求。 -...
### SVG基础知识及应用详解 #### 一、SVG简介 **SVG**(Scalable Vector Graphics,可缩放矢量图形)是一种基于XML的标准图形格式,由W3C组织制定。SVG允许开发者创建高质量的矢量图像,这些图像可以被放大、缩小...
SVG是一种向量图格式,与常见的像素图(如JPEG或PNG)不同,它不依赖分辨率,因此在任何尺寸下都能保持高质量的显示效果。这使得SVG在需要缩放或高分辨率显示的场景中尤为适用,例如在移动设备上、大屏幕显示器上,...
SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、移动应用和图形用户界面中。SVG的核心优势在于它的可缩放性,无论放大多少倍,图像都能保持清晰,不会出现像素化的现象。在...