數據可視化

時間 2019-12-04

標籤數據可視化简体版

原文原文鏈接

概要

數據可視化主要旨在藉助於圖形化手段，清晰有效地傳達與溝通訊息。web

底層技術規範

SVG：用於描述二維矢量圖形的一種圖形格式。
Canvas 2D：Canvas 經過 JavaScript 來繪製 2D 圖形，經過逐像素來進行渲染
Canvas 3D WebGL：WebGL是一個 JavaScript API，用於在任何兼容的 Web 瀏覽器中渲染 3D 圖形

SVG

基於XML來繪製矢量圖形，SVG能夠經過定義必要的線和形狀來建立一個圖形，也能夠修改已有的位圖，或者將這兩種方式結合起來建立圖形。圖形和其組成部分能夠變形，能夠合成，還能夠經過濾鏡徹底改變外觀。canvas

例子

<svg width="200px" height="160px">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="100" cy="80" r="60" fill="green" />
  <ellipse cx="22" cy="20" rx="20" ry="10" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
  <text x="100" y="100" text-anchor="middle" fill="white">SVG</text>
  <line x1="10" x2="20" y1="0" y2="40" style="stroke-width:3;stroke:rgb(0,0,0)"/>
  <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="stroke:red;stroke-width:2"/>
  <path d="M 20 130 Q 40 105, 50 130 T 90230" style="stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
複製代碼

SVG Path

<path d="M 20 130 m 10 10 Q 40 105, 50 130 T 90230" style="stroke-width:1;stroke:rgb(0,0,0)"/>
複製代碼

path元素是SVG基本形狀中最強大的一個。它是經過屬性d定義的，d的值是一個「命令+參數」的序列小程序

Path經常使用指令

M x y  // move to
L x y (or l dx dy) // line
H x (or h dx) // H，繪製平行線。V，繪製垂直線
V y (or v dy)
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)  // 貝塞爾曲線
A rx ry x-axis-rotation large-arc-flag sweep-flag x y  // 弧線
複製代碼

Canvas

canvas是一個可使用腳本(一般爲JavaScript)來繪製圖形的 HTML 元素.微信小程序

<canvas id="canvas" width="150" height="150"></canvas>
複製代碼

示例

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //渲染上下文
//矩形
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
//線
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
//圓
ctx.arc(75,75,50,0,Math.PI*2,true);
// 二次貝塞爾曲線
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.stroke();
複製代碼

SVG與Canvas區別

Canvas 更適合繪製圖形元素數量很是大（這通常是由數據量大致使）的圖表（如熱力圖、地理座標系或平行座標系上的大規模線圖或散點圖等），也利於實現某些視覺特效。可是，在很多場景中，SVG 具備重要的優點：它的內存佔用更低（這對移動端尤爲重要）、渲染性能略高、而且用戶使用瀏覽器內置的縮放功能時不會模糊。

WebGL

taobaofed.org/blog/2015/1…數組

Web數據可視化類庫

D3
Highcharts
ECharts
ChartIQ

D3

全稱（Data-Driven Documents）
一個 JavaScript 的函數庫
基於SVG
官網：d3js.org/

API 功能分類

選擇元素：基於DOM進行一些操做，選擇DOM，修改屬性等數據類型：對原始數據進行處理格式化：格式化顯示數據，如日期時間格式等加載數據：提供基本的http請求方法數據映射：定義兩種數據的轉換關係圖形幾何：用圖形表示數據佈局：定義圖形之間的排列關係動態交互：響應事件，動畫效果等瀏覽器

示例

通常繪製步驟：準備數據，建立DOM, 綁定數據，設置屬性bash

var data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
  .selectAll("div")
  .data(data)
    .enter()
    .append("div")
    .style("width", function(d) { return d + "px"; })
    .text(function(d) { return d; });
複製代碼

Highcharts

基於SVG
純 JavaScript實現
文檔API詳細
支持iPhone，iPad 和 IE6 以上的版本，在 IOS 和 Android 系統中 Highcharts 支持多點觸摸功能
圖表類型：直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖等20 種圖表
國外，開源，商業使用收費

一些配置

chart：圖表區、圖形區和通用圖表配置選項 colors：圖表數據列顏色配置，是一個顏色數組 legend：圖例，用不一樣形狀、顏色、文字等標示不一樣數據列，經過點擊標示能夠顯示或隱藏該數據列 loading：加載中，加載選項控制覆蓋繪圖區的加載屏的外觀和文字 navigation：導航，導出模塊按鈕和菜單配置選項組 series：數據列，圖表上一個或多個數據系列 title：標題，包括即標題和副標題，其中副標題爲非必須的， tooltip：數據點提示框，當鼠標滑過某點時，以框的形式提示改點的數據 Axis：座標軸，包括x軸和y軸微信