h5制作性能变化折线图
导读：收集整理的这篇文章主要介绍了h5制作性能变化折线图，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来h5制作性能变化折线图，h5制作性能变化折线图的注意事项有哪些，下面就是实战案例，一起来看一下。@H_406_0@通过动态设置...
收集整理的这篇文章主要介绍了h5制作性能变化折线图，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来h5制作性能变化折线图，h5制作性能变化折线图的注意事项有哪些，下面就是实战案例，一起来看一下。@H_406_0@通过动态设置内部元素高度 =>
!DOCTYPE htML>
html>
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, inITial-scale=1.0">
meta http-equiv="X-UA-Compatible" content="ie=Edge">
title>
示例1/title>
style>
#title {
margin: 2px;
font-family: Helvetica, Arial, sans-serif;
font-Size: 9px;
font-weight: bold;
line-height: 15px;
color: rgb(0, 255, 255);
}
#demo {
width: 74px;
height: 30px;
background: rgb(0, 255, 255);
margin: 2px }
span.col {
width: 1px;
height: 100%;
float: left;
opacity: 0.9;
background: rgb(0, 0, 34);
}
/style>
/head>
body>
div style=" opacity: 0.9;
cursor: pointer;
position: absolute;
top: 0px;
margin: 10px;
background: rgb(0, 0, 34);
">
div id="title">
/div>
div id="demo">
/div>
/div>
script>
function fillLineChart(id) {
this.id = id;
this.el = document.getElementById(id);
this.value = 0;
//当前值 this.width = parseInt(this.el.clientWidth) this.last=this.width-1;
//从左往右最后一个span的索引 for (VAR i = 0;
i this.width;
i++) {
//初始化span this.el.innerHTML +='span class="col">
/span>
';
}
this.draw = function (value) {
//绘制事件 this.value = value;
//记录当前值 for (var i = 0;
i this.last;
i++) {
//遍历前x-1个,将后一个值赋给前一个 var tmph = this.el.getelementsbytagname("span")[i + 1].style.height;
//获取下一个值 this.el.getElementsByTagName("span")[i].style.height = tmph;
//赋给当前的 }
this.el.getElementsByTagName("span")[this.last].style.height = parseInt(this.el.clientHeight) * (100 - this.value) / 100 + "px";
//设置最后span一个高度=span容器的高度x值百分比 }
}
var demo = new fillLineChart("demo");
var val = 0 setInterval(function () {
val = rand(rand(20, 50), 60);
document.getElementById('title').innerHTML = `示例(${
val}
)` demo.draw(val);
}
, 100);
function rand(begin, end) {
return Math.floor(Math.random() * (end - begin)) + begin;
}
/script>
/body>
/html>
2.通过Canvas => [示例]
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
示例2/title>
style>
#title {
margin: 2px;
font-family: Helvetica, Arial, sans-serif;
font-size: 9px;
font-weight: bold;
line-height: 15px;
color: rgb(0, 255, 255);
}
#demo {
margin: 2px }
span.col {
width: 1px;
height: 100%;
float: left;
opacity: 0.9;
background: rgb(0, 0, 34);
}
/style>
/head>
body>
div style=" opacity: 0.9;
cursor: pointer;
position: absolute;
top: 0px;
margin: 10px;
background: rgb(0, 0, 34);
">
div id="title">
/div>
canvas id="demo" width="74" height="30">
/canvas>
/div>
script>
function fillLineChart(id) {
this.id = id;
this.canvas = document.getElementById(id);
this.value = 0;
this.width = (this.canvas.clientWidth)//获取绑定宽度
this.height = (this.canvas.clientHeight) //获取高度宽度 this.context = this.canvas.getContext("2d");
this.values = [];
this.last = this.width - 1;
//最后一个值的索引 for (var i = 0;
i this.width;
i++) {
//初始化值 this.values.push(this.height);
}
this.draw = function (value) {
this.value = value;
//记录当前值 this.context.clearRect(0, 0, this.width, this.height);
//清空 this.context.beginPath();
//开辟新的绘制路径 this.context.moveTo(0, this.height);
//绘制起点 for (var i = 0;
i this.last;
i++) {
this.values[i] = this.values[i + 1];
//移动索引值 this.context.lineto(i, this.values[i]);
//结束位置 }
this.values[this.last] = this.height * (100 - value) / 100;
//获取最后索引一个值 this.context.lineTo(this.last, this.values[this.last]);
//设置最后一个索引位置 this.context.lineTo(i, this.height);
//绘制结束 this.context.fillStyle = ' rgb(0, 255, 255)';
//填充绘制区域的颜色 this.context.fill();
//填充 }
}
var demo = new fillLineChart("demo");
var val = 0 setInterval(function () {
val = rand(rand(20, 50), 60);
document.getElementById('title').innerHTML = `示例(${
val}
)` demo.draw(val);
}
, 100);
function rand(begin, end) {
return Math.floor(Math.random() * (end - begin)) + begin;
}
/script>
/body>
/html>
3.Canvas增强 => [示例]
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
示例3/title>
style>
#title {
margin: 2px;
font-family: Helvetica, Arial, sans-serif;
font-size: 9px;
font-weight: bold;
line-height: 15px;
color: rgb(0, 255, 255);
}
#demo {
margin: 2px}
span.col {
width: 1px;
height: 100%;
float: left;
opacity: 0.9;
background: rgb(0, 0, 34);
}
/style>
/head>
body>
label >
input type="checkbox" onclick="demo.isFull=this.checked" checked/>
填充显示/label>
div style=" opacity: 0.9;
cursor: pointer;
position: absolute;
top: 30px;
margin: 10px;
background: rgb(0, 0, 34);
">
div id="title">
/div>
canvas id="demo">
/canvas>
/div>
script>
function lineChart(o) {
this.id = o.id;
this.canvas = document.getElementById(o.id);
this.color = o.color || 'rgb(0, 255, 255)';
this.value = 0;
this.isFull = o.isFull || false;
//是否填充颜色 this.canvas.width = this.width = o.width || (this.canvas.clientWidth);
//获取绑定宽度 this.canvas.height = this.height = o.height || (this.canvas.clientHeight);
//获取高度宽度 this.context = this.canvas.getContext("2d");
this.values = [];
this.last = this.width - 1;
//最后一个值的索引 for (var i = 0;
i this.width;
i++) {
//初始化值 this.values.push(this.height);
}
this.draw = function (value) {
this.value = value;
//记录当前值 this.context.clearRect(0, 0, this.width, this.height);
//清空 this.context.beginPath();
//开辟新的绘制路径 this.context.moveTo(0, this.isFull ? this.height : this.values[1]);
//绘制起点 for (var i = 0;
i this.last;
i++) {
this.values[i] = this.values[i + 1];
//移动索引值 this.context.lineTo(i, this.values[i]);
//结束位置 }
this.values[this.last] = this.height * (100 - value) / 100;
//获取最后索引一个值 this.context.lineTo(this.last, this.values[this.last]);
//设置最后一个索引位置 if (this.isFull) {
this.context.lineTo(i, this.height);
//绘制结束 this.context.fillStyle = this.color;
//填充绘制区域的颜色 this.context.fill();
//填充 }
else {
this.context.strokeStyle = this.color;
this.context.stroke();
}
}
}
var demo = new lineChart({
id: "demo", width: "74", height: "30", isFull: true, }
);
var val = 0 setInterval(function () {
val = rand(rand(20, 50), 60);
document.getElementById('title').innerHTML = `示例(${
val}
)` demo.draw(val);
}
, 100);
function rand(begin, end) {
return Math.floor(Math.random() * (end - begin)) + begin;
}
/script>
/body>
/html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
python3与JS有什么不同
js/css动态加载JS插件
以上就是h5制作性能变化折线图的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： h5制作性能变化折线图
本文地址： https://pptw.com/jishu/583833.html