Heim > Artikel > Web-Frontend > H5-Produktionsleistungsänderungsliniendiagramm
H5-Produktionsleistungsänderungsliniendiagramm
- php中世界最好的语言Original
- 2018-03-12 09:57:593272Durchsuche
Dieses Mal werde ich Ihnen ein Liniendiagramm mit den Vorsichtsmaßnahmen für die Erstellung von Liniendiagrammen mit h5-Leistungsänderungen vorstellen.
Durch dynamisches Festlegen der inneren Elementhöhe =>
<!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. Nach Leinwand =>[Beispiel]
<!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)//获取Bindungsbreite
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-Erweiterung=>[Beispiel]
<!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>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte zahlen Sie bitte Achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!
Verwandte Lektüre:
Was ist der Unterschied zwischen Python3 und JS
js/css dynamisches Laden von JS-Plug-ins ins
Das obige ist der detaillierte Inhalt vonH5-Produktionsleistungsänderungsliniendiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erstellen Sie in H5 eine Drag-and-Drop-Vorschaukomponente zum Hochladen von BildernNächster Artikel：So erstellen Sie in H5 eine Drag-and-Drop-Vorschaukomponente zum Hochladen von Bildern
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen