RGraph : svg : 直方图
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>
相关推荐
mapaler 2020-07-17
MIKUScallion 2020-07-05
Dickzeng 2020-07-05
wallowyou 2020-06-28
hermanncain 2020-06-25
mapaler 2020-06-21
Dickzeng 2020-06-17
程序员俱乐部 2020-06-11
lanzhusiyu 2020-06-09
hermanncain 2020-05-09
Elena0 2020-04-11
Leonwey 2020-04-11
wallowyou 2020-03-05
jinxiutong 2020-02-10
jinxiutong 2020-02-03
mqbeauty 2020-01-08
mapaler 2020-01-17
Elena0 2020-01-12
mapaler 2020-01-05