摘要：但如果數(shù)據(jù)可視化做的較弱，反而會帶來負(fù)面效果錯誤的表達(dá)往往會損害數(shù)據(jù)的傳播，完全曲解和誤導(dǎo)用戶，所以更需要我們多維的展現(xiàn)數(shù)據(jù)，就不僅僅是單一層面，目前有多種第三方庫來實(shí)現(xiàn)數(shù)據(jù)的可視化等。數(shù)據(jù)可視化的具體實(shí)現(xiàn)這里基于兩種實(shí)現(xiàn)方式，一種一種。

數(shù)據(jù)可視化的目的其實(shí)就是直觀地展現(xiàn)數(shù)據(jù)，例如讓花費(fèi)數(shù)小時甚至更久才能歸納的數(shù)據(jù)量，轉(zhuǎn)化成一眼就能讀懂的指標(biāo)；通過加減乘除、各類公式權(quán)衡計(jì)算得到的兩組數(shù)據(jù)差異，在圖中顏色敏感、長短大小即能形成對比；數(shù)據(jù)可視化是一個溝通復(fù)雜信息的強(qiáng)大武器。通過可視化信息，我們的大腦能夠更好地抓取和保存有效信息，增加信息的印象。但如果數(shù)據(jù)可視化做的較弱，反而會帶來負(fù)面效果；錯誤的表達(dá)往往會損害數(shù)據(jù)的傳播，完全曲解和誤導(dǎo)用戶，所以更需要我們多維的展現(xiàn)數(shù)據(jù)，就不僅僅是單一層面，
目前有多種第三方庫來實(shí)現(xiàn)數(shù)據(jù)的可視化：Highcharts, Echarts, Chart.js, D3.js等。
總的來說，現(xiàn)在的第三方庫都是基于這兩種瀏覽器圖形渲染技術(shù)實(shí)現(xiàn)的：Canvas和SVG。canvas和webGL都是基于openGL來進(jìn)行封裝。但是webGL由于更貼近openGL所以學(xué)習(xí)曲線較陡，這里就講解Canvas和SVG兩種。
下面是兩種圖形渲染技術(shù)的對比

是百度的一個開源的數(shù)據(jù)可視化工具，一個純 Javascript 的圖表庫，能夠在 PC 端和移動設(shè)備上流暢運(yùn)行，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的 Canvas 庫 ZRender，ECharts 提供直觀，生動，可交互，可高度個性化定制的數(shù)據(jù)可視化圖表。下面是簡單的使用方法：

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等底層技術(shù)
echarts會根據(jù)具體的渲染平臺去做不同的渲染實(shí)現(xiàn)，底層是一個叫路徑代理PathProxy的類，它會負(fù)責(zé)這個底層的繪制指令。根據(jù)不同的渲染器，底層進(jìn)行不同的實(shí)現(xiàn)。

const rect = new zrender.Rect({
  shape: {
    x: 10,
    y: 10,
    width: 80,
    height: 80
  }
});

在canvas不能夠?yàn)槟硞€元素綁定事件，所以采用給整個圖表容器綁定事件。當(dāng)進(jìn)行事件處理的時候，先判斷鼠標(biāo)是否在圖形以內(nèi)。因?yàn)閳D形經(jīng)過旋轉(zhuǎn)和縮放，所以需要將鼠標(biāo)坐標(biāo)切換到圖形坐標(biāo)系。獲取到圖形坐標(biāo)系以后，就可以知道鼠標(biāo)和圖形之間的關(guān)系，就可以進(jìn)行相應(yīng)的事件處理。

在渲染的時候canvas一旦改變就完全重繪，但是效率很高。對于SVG而言，假如說散點(diǎn)圖有一千個，那么DOM就有一千個節(jié)點(diǎn)。如果每一幀都需要把DOM元素進(jìn)行刪除然后添加，效率是非常低的。所以這里可是使用virtual-Dom的方法，通過維護(hù)一個渲染對象列表，每幀將新的渲染對象列表與上一幀的進(jìn)行diff，獲得新增、修改、刪除的渲染對象列表，在根據(jù)列表對DOM相關(guān)節(jié)點(diǎn)進(jìn)行調(diào)整。

這里基于兩種實(shí)現(xiàn)方式，一種canvas一種svg。

在這里實(shí)現(xiàn)了一個簡單的庫，可以繪制柱狀圖、餅狀圖、折線圖、雷達(dá)圖。
下面是使用方法：

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);

下面是效果圖

構(gòu)造函數(shù)可以傳入的參數(shù)有四個，canvas畫布對象，data是我們傳入的數(shù)據(jù)對象，settings是傳入的配置，就可以定義圖形的類型，可以是柱狀圖，或者折線圖。在這里根據(jù)傳入的type進(jìn)行相應(yīng)的繪圖更改。內(nèi)部的實(shí)現(xiàn)原理如下：

if (settings) {
  Object.keys(settings).map((key) => {
    this[key] = settings[key];
  });
}

上面這個部分就能夠讓傳入的參數(shù)覆蓋已有的默認(rèn)設(shè)置，顏色，坐標(biāo)。有些設(shè)置需要通過計(jì)算才能獲得，例如每個單位長度的標(biāo)記，獲取每個值的比例。例如：

this.totalValue = this.getTotalValue();
this.maxValue = this.getMaxValue();
function getTotalValue() {
  let total = 0;
  this.data.map((item) => {
    total += item.value;
  });
  return total;
}

這里先計(jì)算出總數(shù)，然后繪制餅狀圖的時候就計(jì)算出每一條數(shù)據(jù)所占的比例，進(jìn)行繪圖。
下面這部分會根據(jù)傳入的type來繪制不同的圖形，下面是具體實(shí)現(xiàn)：

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的具體實(shí)現(xiàn):

  drawBarUpdate() {
    this.drawAxis();
    this.drawPoint();
    this.drawTitle();
    this.drawBarChart();
  }

前三個函數(shù)用于基本的結(jié)構(gòu)，軸、點(diǎn)、標(biāo)題。第四個函數(shù)用來繪制圖形。主要借助的是canvas的幾種方法fillStyle：設(shè)置填充繪畫的顏色、漸變或模式；strokeStyle: 設(shè)置筆觸的顏色、漸變或模型；beginPath：開始一條路徑，或者重置當(dāng)前的路徑；arc: 用來創(chuàng)建弧/曲線arc(x, y, r, startAngle, endAngle, direction)x，y分別代表圓中心的x，y坐標(biāo)。startAngle為起始角，endAngle為結(jié)束角，direction代表順時針，還是逆時針繪圖。首先根據(jù)數(shù)據(jù)的長度，確定每條數(shù)據(jù)的長度和坐標(biāo)然后使用下面操作進(jìn)行繪圖。

this.ctx.beginPath();
this.ctx.arc(x, y, radius, startAngle, endAngle, direction);
this.ctx.fill();

這樣就可以繪制圖形了

SVG是一種使用XML描述2D圖形的語言。SVG基于XML，這意味著SVG DOM的每個元素都是可用的。你可以為每個元素附加javaScript事件處理器。
svg不同于canvas，提供了很多基本形狀。例如rect: 圓；circle: 橢圓；ellipse：直線；line: 折線；polyline：多邊形；polygon：路徑。
這里借助common模塊下的pie.js進(jìn)行了解。
下面是使用方法：

var myPie = new Pie({
  pieR: 40, // 外徑
  donutR: 35, // 內(nèi)徑
  rotation: -90, // 旋轉(zhuǎn)到從y軸正方向起始
  strokeColor: "#FFF", // 使用白色描邊
  animation: true, // 啟用默認(rèn)展現(xiàn)動畫
  slices: [{
    color: "#E3E3E3", // 第一切片顏色
    percent: 0.1 // 第一切片面積占比
  }, {
    color: "#5FC2F5", // 第二切片顏色
    percent: 0.2 // 第二切片面積占比
  }, {
    percent: 0.3 // 第三切片面積占比
  }, {
    percent: 0.4 // 第四切片面積占比
  }]
});

$("body").append(myPie.getNode()); // 插入餅圖。

下面是效果圖

首先也是進(jìn)行重置默認(rèn)的參數(shù)設(shè)置，還有計(jì)算一些屬性，例

this.args = $.extend({
  pieR: 100,
  slices: [{
    percent: 1,
  }],
}, args);
$.each(this.args.slices, function(i, item) {
  item.angle = (item.percent || 0) * 360;
})

然后設(shè)置每個元素應(yīng)該設(shè)置的路徑，是通過下面函數(shù)進(jìn)行實(shí)現(xiàn)：

 /**
  *  @param {Number} startAngle 開始的角度
  *  @param {Number} angle 旋轉(zhuǎn)角度
  *  @param {Number} pieR 半徑
  *  @param {Number} donutR 環(huán)形圖所需要的參數(shù)
  *  @return {Object} 坐標(biāo)對象
  */
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, // 開始點(diǎn)
    "L", pieR * startAngleTri.cos, pieR * startAngleTri.sin, // 開始的邊界
    "A", pieR, pieR, // 外部的半徑
    0, // x軸上的旋轉(zhuǎn)
    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軸上的旋轉(zhuǎn)
    Math.abs(angle) > Math.PI ? 1 : 0, // large-arc-flag
    0, // sweep-flag
    donutR * startAngleTri.cos, donutR * startAngleTri.sin // 結(jié)束點(diǎn)
  ].join(" ");
}

繪制圖形是靠的path這個元素，下面的命令可以用于路徑數(shù)據(jù):

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因?yàn)樘峁┝艘恍┗镜膱D形組件所以更好畫，但是各有優(yōu)點(diǎn)
。
如果需要制作更好的圖形庫，我們就需要借助繪圖引擎，就能夠針對多種平臺使用不同的渲染方式。