www.rgraph.net 下载 RGraph.minified-2018-08-14.zip
解压后,将目录 libraries 简化为: lib
直方图例子: RGraph/svg_bar1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RGraph : SVG Bar 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.bar.js"></script>
</head>
<body>
<div style="width: 750px; height: 300px" id="chart-bar"></div>
<div id="tab"></div>
<script>
var data = [8,5,9,3,5,2,4];
var labels = ['周一','周二','周三','周四','周五','周六','周日'];
var tips = new Array();
for (var i=0; i<data.length; i++) {
tips[i] = labels[i] + ': ' + data[i];
}
var bar = new RGraph.SVG.Bar({
id: 'chart-bar',
data: data,
options: {
gutterTop: 50,
gutterBottom: 75,
hmargin: 20,
xaxisLabels: labels,
tooltips: tips,
title: 'A basic Bar chart',
titleSubtitle: 'A chart showing the daily totals for last week',
titleSubtitleItalic: true,
colors: ['red','pink'],
shadow: true,
shadowOpacity: 0.2
}
}).draw();
// create table
var table = document.createElement("table");
table.border = "1"; // table.width = "100%";
var tb = document.createElement("tbody");
table.appendChild(tb);
//var tr = document.createElement("tr");
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>
</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模块的源
svg2vd svg2vd是SVG到VectorDrawable命令行工具。安装您可以使用 w /以下命令来安装svg2vd : npm install -g svg2vd用法Usage: svg2vd [options] [file]Options: -V, --version output the version number -s, --...
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 字形图标到 Web 字体生成 关于 Glyphs2Font是一个小型命令行实用程序,用于将一个或多个基于SVG的图标转换为Web字体的字形。... svg: example-font.svg ttf: example-font.ttf eot: example-font.eot
Svg-:Svg动画系列demo合集
svg2vector:SVG图像到Android矢量可绘制XML资源文件的在线批处理转换器
svg:SVG的编写器和解析器
SVG:SVG wooo wooo
SVG格式的俄罗斯和世界地图该存储库包含SVG格式的地图和用于处理该地图JavaScript。 JavaScript库的主要功能: 使用传入的地图片段渲染SVG IE的VML支持(标准版本早于SVG) 地图尺寸调整支持移动设备支持添加阴影将...
Svg2ass 将SVG矢量图形转换为ASS字幕绘制指令。 概述 SVG2ASS接收SVG文件,并放下ASS对话框行,准备粘贴到例如Aegisub中。 仅支持一组基本的SVG功能,而大多数更高级的功能都将被忽略。 您可以通过将所有对象转换为...
example-svgloader-threejs:SVG加载器示例-ThreeJS
指令命令标题svgeditor.openSvgEditor 打开SVG编辑器svgeditor.newSvgEditor 使用SVG编辑器的新文件svgeditor.reopenRelatedTextEditor 重新打开与当前SVG编辑器相关的文本编辑器配置名称描述默认svgeditor....
SVG 绘图模块扩展 注意: 分支只包含 JavaScript 源代码和 Java 测试资源。 HTML 页面在分支中维护。 信息 SVG 绘图模块扩展由多个模块组成,每个模块在解析“绘图”元素时执行特定任务。 SVG Plot 模块通过 ...