HTML5 charts and graphs Today I have found one interesting library – flotr2. This is opensource library for drawing HTML5 charts and graphs. It allow to draw charts in different modes like: lines, bars, candles, pies, bubbles. More – it don’t require any extra libraries like jQuery or Prototype. And finally – it has good compatibility with different browsers. I have prepared our own demo for today’s lesson (using that library).
HTML5图表和图形今天，我发现了一个有趣的库– flotr2。 这是用于绘制HTML5图表和图形的开源库。 它允许以不同的模式绘制图表，例如：线，条，蜡烛，饼图，气泡。 更多–它不需要任何额外的库，例如jQuery或Prototype。 最后–与不同的浏览器具有良好的兼容性。 我已经为今天的课程准备了自己的演示(使用该库)。
Here are our demo and downloadable package:
这是我们的演示和可下载的软件包：
现场演示
打包下载
Ok, download the source files and lets start coding !
好的，下载源文件并开始编码！
步骤1. HTML (Step 1. HTML)
This is markup of our final page. Here it is:
这是我们最后一页的标记。 这里是：
index.html (index.html)
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 charts and graphs - using Flotr2 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/flotr2.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/flashcanvas.js"></script>
<![endif]-->
</head>
<body>
<header>
<h2>HTML5 charts and graphs - using Flotr2</h2>
<a href="https://www.script-tutorials.com/html5-charts-and-graphs/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div id="container" class="container"></div>
<div class="controls">
<h3>Function:</h3>
<p>
<input type="radio" name="func" value="1" onclick="toggleFunc(1)" checked> sin
<input type="radio" name="func" value="2" onclick="toggleFunc(2)"> sin(1/x)
</p>
<h3>Visual mode:</h3>
<p>
<input type="radio" name="mode" value="1" onclick="toggleMode(1)" checked> #1
<input type="radio" name="mode" value="2" onclick="toggleMode(2)"> #2
<input type="radio" name="mode" value="3" onclick="toggleMode(3)"> #3
</p>
</div>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 charts and graphs - using Flotr2 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/flotr2.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/flashcanvas.js"></script>
<![endif]-->
</head>
<body>
<header>
<h2>HTML5 charts and graphs - using Flotr2</h2>
<a href="https://www.script-tutorials.com/html5-charts-and-graphs/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div id="container" class="container"></div>
<div class="controls">
<h3>Function:</h3>
<p>
<input type="radio" name="func" value="1" onclick="toggleFunc(1)" checked> sin
<input type="radio" name="func" value="2" onclick="toggleFunc(2)"> sin(1/x)
</p>
<h3>Visual mode:</h3>
<p>
<input type="radio" name="mode" value="1" onclick="toggleMode(1)" checked> #1
<input type="radio" name="mode" value="2" onclick="toggleMode(2)"> #2
<input type="radio" name="mode" value="3" onclick="toggleMode(3)"> #3
</p>
</div>
<script src="js/script.js"></script>
</body>
</html>
步骤2. CSS (Step 2. CSS)
Here are all stylesheets (most of styles – just page layout styles, nothing especially)
这是所有样式表(大多数样式-仅页面布局样式，没有特别要求)
css / main.css (css/main.css)
/* page layout styles */
*{
margin:0;
padding:0;
}
body {
background-color:#eee;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
color: #000;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 600px;
height: 400px;
}
.controls {
border: 1px dashed gray;
color: #000;
margin: 20px auto;
padding: 25px;
position: relative;
width: 550px;
}
.controls p {
margin-bottom: 10px;
}
.controls input {
margin-left: 10px;
}
/* page layout styles */
*{
margin:0;
padding:0;
}
body {
background-color:#eee;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
color: #000;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 600px;
height: 400px;
}
.controls {
border: 1px dashed gray;
color: #000;
margin: 20px auto;
padding: 25px;
position: relative;
width: 550px;
}
.controls p {
margin-bottom: 10px;
}
.controls input {
margin-left: 10px;
}
步骤3. JS (Step 3. JS)
js / flotr2.min.js和js / flashcanvas.js (js/flotr2.min.js and js/flashcanvas.js)
Both libraries is required and available in our package. Next – our custom file where I have implemented two different functions and three visual modes for charts.
这两个库都是必需的，并且在我们的软件包中可用。 接下来–我们的自定义文件，其中我为图表实现了两种不同的功能和三种可视模式。
js / script.js (js/script.js)
var container = document.getElementById('container');
var start = (new Date).getTime();
var data, graph, offset, i;
var mode = 1;
var fmode = 1; // 1- basic sin, 2 - sin(1/x)
// toggle mode
function toggleMode(i) {
mode = i;
}
// toggle func
function toggleFunc(i) {
fmode = i;
}
// Draw a sine curve at time t
function animateSine (t) {
data = [];
data2 = [];
// little offset between steps
offset = 2 * Math.PI * (t - start) / 10000;
if (fmode == 2 && offset > 15) {
start = t;
}
for (i = 0; i < 4 * Math.PI; i += 0.2) {
if (fmode == 1) {
data.push([i, Math.sin(i - offset)]);
data2.push([i, Math.sin(i*2 - offset)]);
} else if (fmode == 2) {
data.push([i, Math.sin(1/(i-offset))]);
// data2.push([i, Math.sin(1/(i*2-offset))]);
}
}
// prepare properties
var properties;
switch (mode) {
case 1:
properties = {
yaxis : {
max : 2,
min : -2
}
};
break;
case 2:
properties = {
yaxis : {
max : 2,
min : -2
},
bars: {
show: true,
horizontal: false,
shadowSize: 0,
barWidth: 0.5
}
};
break;
case 3:
properties = {
yaxis : {
max : 2,
min : -2
},
radar: {
show: true
},
grid: {
circular: true,
minorHorizontalLines: true
}
};
break;
case 4:
properties = {
yaxis : {
max : 2,
min : -2
},
bubbles: {
show: true,
baseRadius: 5
},
};
break;
}
// draw graph
if (fmode == 1) {
graph = Flotr.draw(container, [ data, data2 ], properties);
} else if (fmode == 2) {
graph = Flotr.draw(container, [ data ], properties);
}
// main loop
setTimeout(function () {
animateSine((new Date).getTime());
}, 50);
}
animateSine(start);
var container = document.getElementById('container');
var start = (new Date).getTime();
var data, graph, offset, i;
var mode = 1;
var fmode = 1; // 1- basic sin, 2 - sin(1/x)
// toggle mode
function toggleMode(i) {
mode = i;
}
// toggle func
function toggleFunc(i) {
fmode = i;
}
// Draw a sine curve at time t
function animateSine (t) {
data = [];
data2 = [];
// little offset between steps
offset = 2 * Math.PI * (t - start) / 10000;
if (fmode == 2 && offset > 15) {
start = t;
}
for (i = 0; i < 4 * Math.PI; i += 0.2) {
if (fmode == 1) {
data.push([i, Math.sin(i - offset)]);
data2.push([i, Math.sin(i*2 - offset)]);
} else if (fmode == 2) {
data.push([i, Math.sin(1/(i-offset))]);
// data2.push([i, Math.sin(1/(i*2-offset))]);
}
}
// prepare properties
var properties;
switch (mode) {
case 1:
properties = {
yaxis : {
max : 2,
min : -2
}
};
break;
case 2:
properties = {
yaxis : {
max : 2,
min : -2
},
bars: {
show: true,
horizontal: false,
shadowSize: 0,
barWidth: 0.5
}
};
break;
case 3:
properties = {
yaxis : {
max : 2,
min : -2
},
radar: {
show: true
},
grid: {
circular: true,
minorHorizontalLines: true
}
};
break;
case 4:
properties = {
yaxis : {
max : 2,
min : -2
},
bubbles: {
show: true,
baseRadius: 5
},
};
break;
}
// draw graph
if (fmode == 1) {
graph = Flotr.draw(container, [ data, data2 ], properties);
} else if (fmode == 2) {
graph = Flotr.draw(container, [ data ], properties);
}
// main loop
setTimeout(function () {
animateSine((new Date).getTime());
}, 50);
}
animateSine(start);
Full documentation of flotr2 library you can find here.
您可以在这里找到flotr2库的完整文档。
现场演示
打包下载
结论 (Conclusion)
Hope that today’s lesson was interesting for you as usual. We made another one nice html5 sample. I will be glad to see your thanks and comments. Good luck!
希望今天的课程像往常一样对您很有趣。 我们制作了另一个不错的html5示例。 看到您的感谢和评论，我将非常高兴。 祝好运！
翻译自: https://www.script-tutorials.com/html5-charts-and-graphs/
扫一扫
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
