www.rgraph.net 下载 RGraph.minified-2018-08-14.zip
解压后,将目录 libraries 简化为: lib
双线图例子: RGraph/svg/line2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RGraph : SVG Line 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.line.js"></script>
</head>
<body>
<div style="width: 750px; height: 300px" id="chart-line"></div>
<div id="tab"></div>
<script>
var keys = ['Richard','Charlie'];
var data =[[0.05,0.06,0.01,0.06,0.09,0.02,0.07],
[0.07,0.02,0.06,0.08,0.05,0.05,0.02]];
var labels = ['周一','周二','周三','周四','周五','周六','周日'];
var line2 = new RGraph.SVG.Line({
id: 'chart-line',
data: data,
options: {
backgroundGridVlines: true,
backgroundGridBorder: false,
key: keys,
gutterTop: 55,
linewidth: 5,
hmargin: 0,
title: 'A basic linechart',
gutterLeft: 50,
gutterBottom: 50,
yaxisDecimals: 2,
tickmarksStyle: 'endcircle',
tickmarksFill: 'white',
tickmarksLinewidth: 3,
tickmarksSize: 10,
spline: true,
xaxis: false,
yaxis: false,
xaxisLabels: labels,
shadow: true
}
}).trace();
// 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); // 创建第一行
td = tr.insertCell(0); // 插入单元格
td.innerHTML = "Name"; // 加字段名
for(var j=0; j<labels.length; j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = labels[j];
td.align = "center";
}
// 多行数组
for(var i=0; i<keys.length; i++){
tr = tb.insertRow(tb.rows.length); // 创建一行
td = tr.insertCell(0); // 插入单元格
td.innerHTML = keys[i]; // 加名字
for(var j=0; j< data[i].length; j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = data[i][j];
td.align = "center";
}
}
document.querySelector("#tab").appendChild(table);
</script>
</body>
</html>
分享到:
相关推荐
使用场景:很多时候下载的图片都是SVG矢量文件,不适用于需要 ico图片 的场景。 举例说明:比如,iconfont网站上下载的图标资源。 功能描述:此程序使用Python编写 1. 可以将 单个SVG图片文件 转换为 【128/64/48/32...
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
网络图形标准svg的特征与实现.pdf 摘要:SVG(Scalable Vector Graphics) 是由 W3C组织开发的矢量图形标准,主要面向网 络应用,它灵活,可扩展,能表现丰富的图形内容,实现了强大的交互性,可重用性和 可伸缩性。...
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
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-:Svg动画系列demo合集
SVG 字形图标到 Web 字体生成 关于 Glyphs2Font是一个小型命令行实用程序,用于将一个或多个基于SVG的图标转换为Web字体的字形。 生成的 Web 字体以 TTF、EOF、WOFF 和 SVG 格式提供,并生成相应的用于直接嵌入的 ...
svg:SVG的编写器和解析器
SVG:SVG wooo wooo
svg2vector:SVG图像到Android矢量可绘制XML资源文件的在线批处理转换器
指令命令标题svgeditor.openSvgEditor 打开SVG编辑器svgeditor.newSvgEditor 使用SVG编辑器的新文件svgeditor.reopenRelatedTextEditor 重新打开与当前SVG编辑器相关的文本编辑器配置名称描述默认svgeditor....
Svg2ass 将SVG矢量图形转换为ASS字幕绘制指令。 概述 SVG2ASS接收SVG文件,并放下ASS对话框行,准备粘贴到例如Aegisub中。 仅支持一组基本的SVG功能,而大多数更高级的功能都将被忽略。 您可以通过将所有对象转换为...
SVG格式的俄罗斯和世界地图该存储库包含SVG格式的地图和用于处理该地图JavaScript。 JavaScript库的主要功能: 使用传入的地图片段渲染SVG IE的VML支持(标准版本早于SVG) 地图尺寸调整支持移动设备支持添加阴影将...
SVG.NET C#SVG渲染库在Codeplex上的公共派生: ://svg.codeplex.com/ 最初,这是一个较小的修改,可以写入正确的SVG字符串。 但是现在,经过将近两年的修复和改进,我们决定与公众共享当前的代码库,以进一步改进...
example-svgloader-threejs:SVG加载器示例-ThreeJS
偶像主义通过搜索,优化和最终合并来自多个目录的svg图标文件或包含所需属性的配置文件,可以使用各种格式的现代字体和可自定义的资产生成器。可用的字体类型: svg,ttf,woff,woff2,eot。可用资产: html,css,...