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矢量文件,不适用于需要 ico图片 的场景。 举例说明:比如,iconfont网站上下载的图标资源。 功能描述:此程序使用Python编写 1. 可以将 单个SVG图片文件 转换为 【128/64/48/32...
SVG6000 用户手册 V3.2 本手册是星网数码 SVG6000 用户手册 V3.2 的知识点总结,涵盖了 SVG6000 的系统概述、硬件配置、软件配置、短信管理、业务特性说明等方面的知识点。 系统概述 * 系统简介:SVG6000 是一款...
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
网络图形标准svg的特征与实现.pdf 摘要:SVG(Scalable Vector Graphics) 是由 W3C组织开发的矢量图形标准,主要面向网 络应用,它灵活,可扩展,能表现丰富的图形内容,实现了强大的交互性,可重用性和 可伸缩性。...
svg-sparkline:SVG :: Sparkline CPAN模块的源
html5 svg玫瑰花盛开动画特效是一款漂亮的svg绘制玫瑰花花朵开花动画效果。
2、多页应用说明color picker组件测试页:组件消息通信框架测试页:svg底层绘制api测试页:组件间通信近期动态1、更新各种设计图2、独立项目内置的ColorPicker、svg底层绘制api、组件间消息通信框架为第三方依赖,...
svg2ttf 将SVG字体转换为TTF格式。 它最初是为编写的,但是您会发现它对您的项目很有用。 对于开发人员: 内部API与FontForge的API类似。 由于主要目标是生成图标字体,因此源可能缺少某些特定的TTF / OTF功能,...
- 开源CSS,SVG和Figma UI图标提供SVG Sprite,样式化组件,NPM和API2.0的新功能 :partying_face: 200个新图标 :rocket: SVG图标 :fire: SVG精灵 :nail_polish: 样式化的组件 :atom_symbol_selector: React本地样式...
Svg-:Svg动画系列demo合集
SVG 字形图标到 Web 字体生成 关于 Glyphs2Font是一个小型命令行实用程序,用于将一个或多个基于SVG的图标转换为Web字体的字形。 生成的 Web 字体以 TTF、EOF、WOFF 和 SVG 格式提供,并生成相应的用于直接嵌入的 ...
2. 文件大小:SVG文件通常比JPEG和GIF等位图格式更小,因此下载速度快。 3. 交互性:SVG图像可以通过改变代码实现交互功能,如点击地图元素跳转至其他页面或执行特定操作。 4. 动态生成:SVG地图在用户端生成,减少...
一款简单的HTML5 SVG绘制卡通玫瑰花动画特效,先用线条勾画出玫瑰花的形状,再生成颜色过程动画。
HTML5 SVG线条玫瑰花动画特效是一款基于svg绘制卡通玫瑰花动画,先用线条勾画出花的现状,在生成颜色过程特效。
svg:SVG的编写器和解析器
SVG:SVG wooo wooo
SVG绘制玫瑰花盛开动画特效是一款svg盛开的花朵动画特效。
指令命令标题svgeditor.openSvgEditor 打开SVG编辑器svgeditor.newSvgEditor 使用SVG编辑器的新文件svgeditor.reopenRelatedTextEditor 重新打开与当前SVG编辑器相关的文本编辑器配置名称描述默认svgeditor....
svg2vector:SVG图像到Android矢量可绘制XML资源文件的在线批处理转换器