摘要:但如果數據可視化做的較弱,反而會帶來負面效果錯誤的表達往往會損害數據的傳播,完全曲解和誤導用戶,所以更需要我們多維的展現數據,就不僅僅是單一層面,目前有多種第三方庫來實現數據的可視化等。數據可視化的具體實現這里基于兩種實現方式,一種一種。
數據可視化的目的其實就是直觀地展現數據,例如讓花費數小時甚至更久才能歸納的數據量,轉化成一眼就能讀懂的指標;通過加減乘除、各類公式權衡計算得到的兩組數據差異,在圖中顏色敏感、長短大小即能形成對比;數據可視化是一個溝通復雜信息的強大武器。通過可視化信息,我們的大腦能夠更好地抓取和保存有效信息,增加信息的印象。但如果數據可視化做的較弱,反而會帶來負面效果;錯誤的表達往往會損害數據的傳播,完全曲解和誤導用戶,所以更需要我們多維的展現數據,就不僅僅是單一層面,
目前有多種第三方庫來實現數據的可視化:Highcharts, Echarts, Chart.js, D3.js等。
總的來說,現在的第三方庫都是基于這兩種瀏覽器圖形渲染技術實現的:Canvas和SVG。canvas和webGL都是基于openGL來進行封裝。但是webGL由于更貼近openGL所以學習曲線較陡,這里就講解Canvas和SVG兩種。
下面是兩種圖形渲染技術的對比
SVG | Canvas |
---|---|
不依賴分辨率 | 依賴分辨率 |
支持事件處理器 | 不支持事件處理器 |
最適合帶有大型渲染區域的應用程序 | 弱的文本渲染能力 |
復雜度高會減慢渲染速度(任何過度使用 DOM 的應用都不快) | 能夠以 .png 或 .jpg 格式保存結果圖像 |
不適合游戲應用 | 最適合圖圖像密集型的游戲 |
可以為某個元素附加 JavaScript 事件處理器。在 SVG 中,每個被繪制的圖形均被視為對象。 | 一旦圖形被繪制完成,它就不會繼續得到瀏覽器的關注。如果其位置發生變化,那么整個場景都需要重新繪制。 |
是百度的一個開源的數據可視化工具,一個純 Javascript 的圖表庫,能夠在 PC 端和移動設備上流暢運行,兼容當前絕大部分瀏覽器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底層依賴輕量級的 Canvas 庫 ZRender,ECharts 提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。下面是簡單的使用方法:
option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: { type: "value" }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line" }] };如何支持多種渲染方式
echarts支持svg、canvas、vml等底層技術
echarts會根據具體的渲染平臺去做不同的渲染實現,底層是一個叫路徑代理PathProxy的類,它會負責這個底層的繪制指令。根據不同的渲染器,底層進行不同的實現。
const rect = new zrender.Rect({ shape: { x: 10, y: 10, width: 80, height: 80 } });如何支持事件處理
在canvas不能夠為某個元素綁定事件,所以采用給整個圖表容器綁定事件。當進行事件處理的時候,先判斷鼠標是否在圖形以內。因為圖形經過旋轉和縮放,所以需要將鼠標坐標切換到圖形坐標系。獲取到圖形坐標系以后,就可以知道鼠標和圖形之間的關系,就可以進行相應的事件處理。
SVG渲染如何部分更新在渲染的時候canvas一旦改變就完全重繪,但是效率很高。對于SVG而言,假如說散點圖有一千個,那么DOM就有一千個節點。如果每一幀都需要把DOM元素進行刪除然后添加,效率是非常低的。所以這里可是使用virtual-Dom的方法,通過維護一個渲染對象列表,每幀將新的渲染對象列表與上一幀的進行diff,獲得新增、修改、刪除的渲染對象列表,在根據列表對DOM相關節點進行調整。
數據可視化的具體實現這里基于兩種實現方式,一種canvas一種svg。
Canvas在這里實現了一個簡單的庫,可以繪制柱狀圖、餅狀圖、折線圖、雷達圖。
下面是使用方法:
const canvas = document.getElementById("canvas"); const data = [{ name: "籃球", value: 2260, }, { name: "羽毛球", value: 1170, }, { name: "乒乓球", value: 1230, }, { name: "足球", value: 1450, }, ]; const settings = { type: "bar" }; new Chart(canvas, data, { title: "Sport" }, settings);
下面是效果圖
構造函數可以傳入的參數有四個,canvas畫布對象,data是我們傳入的數據對象,settings是傳入的配置,就可以定義圖形的類型,可以是柱狀圖,或者折線圖。在這里根據傳入的type進行相應的繪圖更改。內部的實現原理如下:
if (settings) { Object.keys(settings).map((key) => { this[key] = settings[key]; }); }
上面這個部分就能夠讓傳入的參數覆蓋已有的默認設置,顏色,坐標。有些設置需要通過計算才能獲得,例如每個單位長度的標記,獲取每個值的比例。例如:
this.totalValue = this.getTotalValue(); this.maxValue = this.getMaxValue(); function getTotalValue() { let total = 0; this.data.map((item) => { total += item.value; }); return total; }
這里先計算出總數,然后繪制餅狀圖的時候就計算出每一條數據所占的比例,進行繪圖。
下面這部分會根據傳入的type來繪制不同的圖形,下面是具體實現:
if (this.type === "bar" || this.type === "line") { this.drawBarUpdate(); } else if (this.type === "pie" || this.type === "ring") { this.drawPieUpdate(); } else if (this.type === "radar") { this.drawRadarUpdate(); }
看draBarUpdate的具體實現:
drawBarUpdate() { this.drawAxis(); this.drawPoint(); this.drawTitle(); this.drawBarChart(); }
前三個函數用于基本的結構,軸、點、標題。第四個函數用來繪制圖形。主要借助的是canvas的幾種方法fillStyle:設置填充繪畫的顏色、漸變或模式;strokeStyle: 設置筆觸的顏色、漸變或模型;beginPath:開始一條路徑,或者重置當前的路徑;arc: 用來創建弧/曲線arc(x, y, r, startAngle, endAngle, direction)x,y分別代表圓中心的x,y坐標。startAngle為起始角,endAngle為結束角,direction代表順時針,還是逆時針繪圖。首先根據數據的長度,確定每條數據的長度和坐標然后使用下面操作進行繪圖。
this.ctx.beginPath(); this.ctx.arc(x, y, radius, startAngle, endAngle, direction); this.ctx.fill();
這樣就可以繪制圖形了
SVGSVG是一種使用XML描述2D圖形的語言。SVG基于XML,這意味著SVG DOM的每個元素都是可用的。你可以為每個元素附加javaScript事件處理器。
svg不同于canvas,提供了很多基本形狀。例如rect: 圓;circle: 橢圓;ellipse:直線;line: 折線;polyline:多邊形;polygon:路徑。
這里借助common模塊下的pie.js進行了解。
下面是使用方法:
var myPie = new Pie({ pieR: 40, // 外徑 donutR: 35, // 內徑 rotation: -90, // 旋轉到從y軸正方向起始 strokeColor: "#FFF", // 使用白色描邊 animation: true, // 啟用默認展現動畫 slices: [{ color: "#E3E3E3", // 第一切片顏色 percent: 0.1 // 第一切片面積占比 }, { color: "#5FC2F5", // 第二切片顏色 percent: 0.2 // 第二切片面積占比 }, { percent: 0.3 // 第三切片面積占比 }, { percent: 0.4 // 第四切片面積占比 }] }); $("body").append(myPie.getNode()); // 插入餅圖。
下面是效果圖
首先也是進行重置默認的參數設置,還有計算一些屬性,例
this.args = $.extend({ pieR: 100, slices: [{ percent: 1, }], }, args); $.each(this.args.slices, function(i, item) { item.angle = (item.percent || 0) * 360; })
然后設置每個元素應該設置的路徑,是通過下面函數進行實現:
/** * @param {Number} startAngle 開始的角度 * @param {Number} angle 旋轉角度 * @param {Number} pieR 半徑 * @param {Number} donutR 環形圖所需要的參數 * @return {Object} 坐標對象 */ getSectorPath(startAngle, angle, pieR, donutR) { startAngle = startAngle * Math.PI / 180; angle = angle * Math.PI / 180; var startAngleTri = { cos: Math.cos(startAngle), sin: Math.sin(startAngle) }; var angleTri = { cos: Math.cos(startAngle + angle), sin: Math.sin(startAngle + angle) }; return [ "M", donutR * startAngleTri.cos, donutR * startAngleTri.sin, // 開始點 "L", pieR * startAngleTri.cos, pieR * startAngleTri.sin, // 開始的邊界 "A", pieR, pieR, // 外部的半徑 0, // x軸上的旋轉 Math.abs(angle) > Math.PI ? 1 : 0, // large-arc-flag 1, // sweep-flag pieR * angleTri.cos, pieR * angleTri.sin, // end point "L", donutR * angleTri.cos, donutR * angleTri.sin, // end edge "A", donutR, donutR, // inner arc 0, // x軸上的旋轉 Math.abs(angle) > Math.PI ? 1 : 0, // large-arc-flag 0, // sweep-flag donutR * startAngleTri.cos, donutR * startAngleTri.sin // 結束點 ].join(" "); }
繪制圖形是靠的path這個元素,下面的命令可以用于路徑數據:
M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z = closepath
簡便寫就可以如下:
那么繪制餅狀圖的就可以如下這么寫:
$(path).attr({ "d": getSectorPath(startAngle, angle, pieR, donutR) }).css({ // 屬性 })
這就是svg的繪畫方式,相對canvas繪畫,svg因為提供了一些基本的圖形組件所以更好畫,但是各有優點
。
如果需要制作更好的圖形庫,我們就需要借助繪圖引擎,就能夠針對多種平臺使用不同的渲染方式。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99368.html
摘要:二可視化是一個開源的圖表可視化系統,簡單說圖表配置比較方便生成的圖表比較漂亮。 一. 概述 Prometheus自帶了一個web服務,包括一個默認的dashboard,可以使用表達式查詢并進行圖表可視化,默認服務的地址為:http://prometheus_ip:9090 如下圖: showImg(https://segmentfault.com/img/remote/14600000...
摘要:二可視化是一個開源的圖表可視化系統,簡單說圖表配置比較方便生成的圖表比較漂亮。 一. 概述 Prometheus自帶了一個web服務,包括一個默認的dashboard,可以使用表達式查詢并進行圖表可視化,默認服務的地址為:http://prometheus_ip:9090 如下圖: showImg(https://segmentfault.com/img/remote/14600000...
摘要:二可視化是一個開源的圖表可視化系統,簡單說圖表配置比較方便生成的圖表比較漂亮。 一. 概述 Prometheus自帶了一個web服務,包括一個默認的dashboard,可以使用表達式查詢并進行圖表可視化,默認服務的地址為:http://prometheus_ip:9090 如下圖: showImg(https://segmentfault.com/img/remote/14600000...
摘要:在我的前文容器可視化監控中心搭建之中我們就實踐過容器的可視化監控,在那篇文章中我們是使用了技術棧來完成的。 showImg(https://segmentfault.com/img/remote/1460000015484084); 概述 性能監控是容器服務必不可少的基礎設施,容器化應用運行于宿主機上,我們需要知道該容器的運行情況,包括 CPU使用率、內存占用、網絡狀況以及磁盤空間等...
摘要:提供的圖表的確可以滿足大部分的需求,遵循了數據可視化的一些經典范式。數據可視化已然成為了新的風向標。數據團隊的前端要做的就是用最科學的方法向用戶展示最形象的圖表,而這,也是我們前行的目標。 前言 也許很多人都會覺得奇怪,在這樣一個更多以后臺數據分析為主的公司,為什么需要一個專注于前端的團隊?今天這篇文章就來講述那些年我們錯過的前端數據可視化,以此來解答這個問題。 需求 那么,在我們的項...
閱讀 2472·2021-10-12 10:11
閱讀 1218·2021-10-11 10:58
閱讀 3258·2019-08-30 15:54
閱讀 696·2019-08-30 13:59
閱讀 667·2019-08-29 13:07
閱讀 1392·2019-08-26 11:55
閱讀 2133·2019-08-26 10:44
閱讀 2620·2019-08-23 18:25