溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家詳細(xì)介紹了h5實現(xiàn)性能變化折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
通過動態(tài)設(shè)置內(nèi)部元素高度 =>
<!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;//當(dāng)前值
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;//記錄當(dāng)前值
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;//賦給當(dāng)前的
} this.el.getElementsByTagName("span")[this.last].style.height = parseInt(this.el.clientHeight) * (100 - this.value) / 100 + "px";//設(shè)置最后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;//記錄當(dāng)前值
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]);//結(jié)束位置
} this.values[this.last] = this.height * (100 - value) / 100;//獲取最后索引一個值
this.context.lineTo(this.last, this.values[this.last]);//設(shè)置最后一個索引位置
this.context.lineTo(i, this.height);//繪制結(jié)束
this.context.fillStyle = ' rgb(0, 255, 255)';//填充繪制區(qū)域的顏色
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;//記錄當(dāng)前值
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]);//結(jié)束位置
} this.values[this.last] = this.height * (100 - value) / 100;//獲取最后索引一個值
this.context.lineTo(this.last, this.values[this.last]);//設(shè)置最后一個索引位置
if (this.isFull) { this.context.lineTo(i, this.height);//繪制結(jié)束
this.context.fillStyle = this.color;//填充繪制區(qū)域的顏色
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>以上就是h5實現(xiàn)性能變化折線圖的具體操作，代碼應(yīng)該是足夠清楚的，而且我也相信有相當(dāng)?shù)囊恍├涌赡苁俏覀內(nèi)粘９ぷ骺赡軙姷玫降?。通過這篇文章，希望你能收獲更多。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼