本文目錄一覽:
- 1、如何使用canvas繪製走勢圖
- 2、我想用php統計在線用戶數,然後做成走勢圖,這個走勢圖每秒要刷新一次,怎麼做呢?
- 3、成績走勢圖怎麼畫
- 4、如何通過數據在PHP中畫出走勢圖
- 5、PHP網頁中如何嵌入股票走勢圖? 哪位大俠知道啊?
- 6、php+html+css如何輸出數據走勢圖
如何使用canvas繪製走勢圖
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域,您可以控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。
創建 Canvas 元素
向 HTML5 頁面添加 canvas 元素。
規定元素的 id、寬度和高度:
canvas id=”myCanvas” width=”200″ height=”100″/canvas
通過 JavaScript 來繪製
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成:
script type=”text/javascript”
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
/script
JavaScript 使用 id 來尋找 canvas 元素:
var c=document.getElementById(“myCanvas”);
然後,創建 context 對象:
var cxt=c.getContext(“2d”);
getContext(“2d”) 對象是內建的 HTML5 對象,擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。
下面的兩行代碼繪製一個紅色的矩形:
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
fillStyle 方法將其染成紅色,fillRect 方法規定了形狀、位置和尺寸。
理解坐標
上面的 fillRect 方法擁有參數 (0,0,150,75)。
意思是:在畫布上繪製 150×75 的矩形,從左上角開始 (0,0)。
畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。
script type=”text/javascript”
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
var img=new Image()
img.src=””
cxt.drawImage(img,0,0);
/script
我想用php統計在線用戶數,然後做成走勢圖,這個走勢圖每秒要刷新一次,怎麼做呢?
可以用jquery的第三方庫,讓用戶瀏覽器生成走勢圖,用jquery,可以做到每刷新一次頁面就重新生成一個走勢圖
成績走勢圖怎麼畫
1、首先,選擇數據區域並選擇名稱。
2、選擇「僅插入散點圖」,然後選擇一個帶有數據標記的散點圖,然後圖形的原型就會出現。
3、左鍵單擊圖片上的點,任何一個都將執行,然後點被選中。右鍵單擊並選擇添加趨勢線。
4、如果要繪製直線,請選擇「線性」,如果要繪製曲線,請選擇「多項式」。該圖是我們想要的趨勢圖。所有的點在兩側均勻分布。您也可以根據需要顯示公式或R值。設置後,單擊關閉。
5、如果覺得坐標間距不合適,並且想要調整圖形以使其看起來更好,則可以首先在坐標軸上單擊任意數字,然後右鍵單擊,選擇「設置坐標軸格式」,然後根據需要進行調整。設置後,單擊關閉。
如何通過數據在PHP中畫出走勢圖
如果是用PHP的話,可以使用圖像處理的方法輸出走勢圖像。使用PHP處理圖像需要GD庫的支持:詳情請見php官方文檔:
不過建議寫在前台,用JS插件直接生成,推薦使用Chart.js。chart.js官方文檔:
PHP網頁中如何嵌入股票走勢圖? 哪位大俠知道啊?
股票走勢圖一般用FLASH生成的 . PHP 從資料庫取出數據 , 然後生成固定格式的XML , 把XML用JS提交給 FLASH , 生成圖形表 . 一般都是這麼做的 , 就是說 , 首先要有數據 , 一般是 時間 對應數值這樣的數據 , 然後用FLASH 獲取數據 生成走勢圖 , 完成!
php+html+css如何輸出數據走勢圖
舊瀏覽器如ie,可以用php的gd庫直接繪製這樣的一幅png圖。
現在的新瀏覽器也可以php輸出數據,填給js,由js在瀏覽器的html5 canvas繪出這樣的圖。走勢就是連接數據點畫直線。
const ctx = canvas.getContext(‘2d’);//獲得畫布
ctx.lineWidth = 5;//設線寬
ctx.moveTo(50, 140);//線條起點
ctx.lineTo(150, 60);//線條終點
原創文章,作者:TFKI,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/140441.html