利用 html5 canvas 簡單繪製折線圖

阿新 • • 發佈：2019-01-16

<!DOCTYPE html>

<html>
	<head>
		<meta charset='utf-8'>
		<title>畫圖</title>
		<style>
			#divContainer{
				margin-top: 20px;
				text-align: center;
			}
			#cv{
				width: 300px;
				height: 200px;
				border-bottom: 2px solid #000;
				border-left: 2px solid #000;
			}
		</style>
	</head>
	<body>
		<div id="divContainer">
			鋁錠價走勢圖<br/>
			<canvas id="cv">你的裝置不支援圖表資料顯示</canvas>
		</div>

		<script>
			(function(){
				window.onload = function(){

					//資料來源
					var dict = [
						{x: "2015-04-24", y: 13400},
						{x: "2015-04-25", y: 13380},
						{x: "2015-04-26", y: 13370},
						{x: "2015-04-27", y: 13370},
						{x: "2015-04-28", y: 13380}
					]

					//資料來源提取
					var len = dict.length;
					var xArr = [], yArr = [], tmp_yArr = [];
					for(var i=0; i<len; i++){
						xArr.push(i * 60);
						tmp_yArr.push(dict[i].y);
					}
					var tmp_minY = Math.min.apply(Math, tmp_yArr);//最小值
					var tmp_maxY = Math.max.apply(Math, tmp_yArr);//最大值
					if(tmp_maxY - tmp_minY <= 100){
						for(var i=0; i<len; i++){
							yArr.push(tmp_yArr[i] - tmp_minY + 50);//與最小的做比較
						}
					}
					else{//如果相差太大會導致圖表不美觀
						for(var i=0; i<len; i++){
							yArr.push(tmp_yArr[i] / 500);
						}
					}
					var minY = Math.min.apply(Math, yArr);
					var maxY = Math.max.apply(Math, yArr);

					//canvas 準備
					var canvas = document.getElementById("cv");//獲取canvas畫布
					var ctx  = canvas.getContext("2d");

					//畫折線
					for(var i=0 ;i<len; i++){
						var x = xArr[i];
						var y = maxY - yArr[i] + minY;
						if(i === 0){
							ctx .moveTo(x, y);
						}
						else{
							ctx .lineTo(x, y);
						}
					}
					ctx .stroke();

					//畫點
					for(var i=0; i<len; i++){
						var x = xArr[i];
						var y = maxY - yArr[i] + minY;
						var xMemo = dict[i].x;
						var yMemo = "¥" + dict[i].y;
						ctx.beginPath();
						ctx.fillStyle = "#000";
						ctx.arc(x, y, 2, 0, 2*Math.PI);//畫點
						ctx.fill();
					 	ctx.fillText(yMemo, x + 3, y - 10);
					 	ctx.fillText(xMemo, x + 3, canvas.height - 10, 40);//畫文字
					}

				}
			})();
		</script>
	</body>
</html>

利用 html5 canvas 簡單繪製折線圖

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>畫圖</title> <style> #divC

html5 canvas 實現簡單繪製折線圖

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>畫圖</title&g

Canvas畫布繪製折線圖

<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> canvas { border: 1p

html5 canvas 標籤繪製圖像且漸變色處理

html5 提供了很多很強大的功能，有些功能甚至可以擺脫伺服器的限制，減少對伺服器的訪問。canvas就是一個html5 新增的強大標籤。雖然功能有待完善，但已然可以解決一些網頁問題。今天主要講ca

利用matplotlib繪製折線圖：CSV格式

熬過初學階段的不適和挫敗感，我們其實完全可以掌握一個全新的領域。本文為《python程式設計從入門到實踐》（以下簡稱參考書》中第16章下載資料中的內容，利用matplotlib繪製最高及最低氣溫折線圖。在此整理為筆記，一為溫習，二為備份，以便日後

前端------ canvas 繪製折線圖詳解

canvas時html5新新增的一個畫布標籤。他有很多屬性，大家可以在下邊網址檢視：畫布canvas中涉及到座標運算，它是以瀏覽器空白左上角為起點，然後根據畫素進行變化的一個元素，話不多說，下邊是一個折線圖的demo：效果圖如下：原始碼： <!

【Canvas】如何用Canvas繪制折線圖

borde 線圖顯示 bubuko img 折線技術技術分享效果 ①設置構造函數 ②顯示在畫布上 ③為該構造函數添加方法 ④初始化效果圖： canvas { border: 1px solid #ccc }【Canvas】如何用C

HTML5 Canvas中繪製橢圓的幾種方法

1.canvas自帶的繪製橢圓的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是後來新增的，引數的意思：(起點x.起點y,半徑x,半徑y,旋轉的角度，起始角，結果角，順時針還是逆時針)

利用Python插值繪製等值線圖

最近需要根據有限的站位點繪製插值等值線圖，在網上中文搜尋一通，只發現了這貨Matplot Basemap 畫湖北地圖、插值、等值線，要麼就是對這貨的轉載，這貨不提供資料的形式，但是基本的程式碼思路還是不錯的，於是繼續轉向google英文，搜到瞭如下的回答，我對程式碼做了註釋，已備別人查詢，關於文中提到的資料是

初探canvas製作一個折線圖——（面向物件）

canvas 準備一塊畫布 <style> canvas { border: 1px solid #ccc; } </style> <canvas width="600"

31、python繪製折線圖方法、案例

折線圖：也稱為曲線圖，它是用直線段將各資料點連線起來而組成的圖形，以折線方式顯示資料的變化趨勢 1 折線圖繪圖函式： plot（x,y,style,color,linewidth） title('圖的標題') 引數說明： style，劃線的樣式‘。’‘-’ color 畫線的顏色

前端---HTML5如何製作一個折線圖

在學習如何製作折線圖,我們先學習一下canvas元素中CanvasRenderingContext2D物件提供的相關方法,通過使用座標表換,開發者無須繁瑣計算每個點的座標,只需對座標系整體表換即可. CanvasRenderingContext2D提供瞭如

QT讀取csv檔案並且繪製折線圖

void MainWindow::readcsvfile() //讀取csv { QFile csvFile("C:/Users/Administrator/Desktop/Demo/0702.CSV"); QStringList csvList; csvList.cl

88.android 簡單的折線圖效果

//第一步寫個ChartView類繼承View： public class ChartView extends View { //xy座標軸顏色 private int xylinecolor = 0xffe2e2e2; //xy座標

生成隨機數，繪製折線圖

import random import matplotlib.pyplot as plt def all_list(arr): result = {} for i in set(arr): result[i] = arr.count(i)

html5-canvas的繪製文字自動換行

　　本文介紹怎麼解決canvas繪圖過程中，drawText的換行問題，先看一個大家平時在canvas繪製文字都會遇到的問題：　　　　一個150*100的canvas畫布，加個邊框明顯邊界 <canvas id="canvas" styl

matplotlib繪製折線圖，包含新增標籤

#coding:utf-8 import numpy as np import matplotlib.pyplot as plt a = np.arange(0.0, 5.0, 0.02) plt.plot(a, np.cos(2*np.pi*a), "r--") '''

OpenGL（十七）繪製折線圖、柱狀圖、餅圖

一、繪製折線圖 glutBitmapCharacter(GLUT_BITMAP_8_BY_13,label[j])函式可以繪製GLUT點陣圖字元，第一個引數是GLUT中指定的特定字形集，第二個引數是

Python零基礎之——繪製折線圖、散點圖！

Python繪圖需要下載安裝matplotlib模組，它是一個數學繪相簿，我們將使用它來製作簡單的圖表，如折線圖和散點圖。關於matplotlib模組的下載安裝預配置將在後面具體介紹。（一）繪製折線圖首先，我們先繪製一個簡單的折線圖 # 呼叫模組 import matplotlib.

HTML5 Canvas中繪製線段

繪製線段呼叫lineTo()方法繪製線段。lineTo(x, y)方法把當前點和lineTo()方法指定的點(x, y)用線段連線起來。如果要繪製多條線段，可以重複呼叫該方法。第一次呼叫，當前點為子路徑的起點，以後每次呼叫，都會把上一次的終點作為本次的起點。我們使用lineT

利用 html5 canvas 簡單繪製折線圖

相關推薦