現在，我們有了畫一個餅形圖的所有必要的工具，讓我們看看如何一起使用它們。

在概念上，任意圖表都有兩部分：

包含要展示的數據的數據模型。 這由特定類型的圖表進行結構化。

圖形化展示是指按照數學公式的規則，將數據模型中的數據通過視覺元素來進行展示。

餅狀圖數據模型
結構化餅狀圖數據的方式中，最常用的就是用一系列的類別和對應的值，每個類別的值與餅圖的份相關聯。

例如，餅圖的數據模型展示按照流派進行分組，看起來就是下面這樣：

古典音樂：10

另類搖滾：14

流行：2

爵士：12

我們可以在script.js文件中添加一個JS對象來存儲數據模型，如下：

var myVinyls = {
    "Classical music": 10,
    "Alternative rock": 14,
    "Pop": 2,
    "Jazz": 12
};

餅狀圖的圖形化展示
餅狀圖用圓來顯示數據模型中的信息，通過將圓切分成一份份。 每份和數據模型中的類別對應，每份的大小與對應類別的值成正比。

我的音樂集有四個類別。 每個類別在餅形圖中的份數大小，與它的類別對應的值成正比。

但是我們怎樣度量份數的大小？ 簡單--我們通過每份的角度。 我們所需要知道的就是它占360度或者2PI的份數。 那么半圓就是180deg或者PI，1/4圓90度或PI/2，以此類推。

為了決定每個類別的份的角度，我們用以下公式：

份角度= 2 * PI * 類別值 / 總值

按照這個公式，古典音樂的那份近似得到如下角度。 0.526 * PI 或者 94度

讓我開始畫吧。 這次我們將用JavaScript類，將其命名為 PieChart 構造函數接受options做為參數，options包含以下：

canvas：指向我們想要畫餅狀圖的索引

data：盛放數據模型的對象的索引

colors：一個數組，數組中是每份的顏色。

PieChart類同時也包含一個draw()方法，它來對圖表進行實際的繪制。

var Piechart = function(options){
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
 
    this.draw = function(){
        var total_value = 0;
        var color_index = 0;
        for (var categ in this.options.data){
            var val = this.options.data[categ];
            total_value += val;
        }
 
        var start_angle = 0;
        for (categ in this.options.data){
            val = this.options.data[categ];
            var slice_angle = 2 * Math.PI * val / total_value;
 
            drawPieSlice(
                this.ctx,
                this.canvas.width/2,
                this.canvas.height/2,
                Math.min(this.canvas.width/2,this.canvas.height/2),
                start_angle,
                start_angle+slice_angle,
                this.colors[color_index%this.colors.length]
            );
 
            start_angle += slice_angle;
            color_index++;
        }
 
    }
}

類中首先將傳入的options參數進行存儲。 它保存了canvas的索引，同時也創建一個繪畫上下文作為類成員變量。 然后它存儲了options中的colors數組。

接下來的部分是最根本的，函數draw()。 它會從數據模型中提取數據。 首先，它計算數據模型中所有數據值的和。 然后對其中每個類別應用上面提到的計算角度的函數。 最后我們調用drawPieSlice()函數，用canvas的中心作為餅狀圖的中心。 至于半徑，我們用canvas寬度的一半與canvas高度的一半的較小值，因為我們不想讓餅狀圖超出canvas。

同樣，每次畫一個類別時，要偏移每份的起始角度和結束角度，否則會發生重疊。

要想使用類，我們必須先創建一個實例對象，然后在創建的對象上調用draw()方法。

var myPiechart = new Piechart(
    {
        canvas:myCanvas,
        data:myVinyls,
        colors:["#fde23e","#f16e23", "#57d9ff","#937e88"]
    }
);
myPiechart.draw();

結果看起來如下這樣:

我們已經看到如何創建餅狀圖。 同樣我們看到，圓環圖與餅狀圖不同之處僅在于中間多了一個洞。 怎樣畫洞呢？ 我們可以畫一個白色的圓在餅狀圖上。

讓我們通過修改PieChart類來做它。

var Piechart = function(options){
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
 
    this.draw = function(){
        var total_value = 0;
        var color_index = 0;
        for (var categ in this.options.data){
            var val = this.options.data[categ];
            total_value += val;
        }
 
        var start_angle = 0;
        for (categ in this.options.data){
            val = this.options.data[categ];
            var slice_angle = 2 * Math.PI * val / total_value;
 
            drawPieSlice(
                this.ctx,
                this.canvas.width/2,
                this.canvas.height/2,
                Math.min(this.canvas.width/2,this.canvas.height/2),
                start_angle,
                start_angle+slice_angle,
                this.colors[color_index%this.colors.length]
            );
 
            start_angle += slice_angle;
            color_index++;
        }
 
        //drawing a white circle over the chart
        //to create the doughnut chart
        if (this.options.doughnutHoleSize){
            drawPieSlice(
                this.ctx,
                this.canvas.width/2,
                this.canvas.height/2,
                this.options.doughnutHoleSize * Math.min(this.canvas.width/2,this.canvas.height/2),
                0,
                2 * Math.PI,
                "#ff0000"
            );
        }
 
    }
}

添加的代碼在options參數中，通過一個doughnutHoleSize成員變量。 如果這個參數在options中沒有傳，代碼就按照之前的進行繪制，如果傳了，就在餅狀圖中心畫一個白色的圓形。

圓的半徑由餅形圖的半徑和doughnutHoleSize參數的乘積來決定。 它應該是0到1之間的數字，0代表餅形圖，大于0時，值越大餅形圖中間的洞越大，當值為1時會使圖表不可見。

要想畫一個圖表一半大小的圓環圖，我們可以將doughnutHoleSize設置為0.5，然后像下面這樣調用：

var myDougnutChart = new Piechart(
    {
        canvas:myCanvas,
        data:myVinyls,
        colors:["#fde23e","#f16e23", "#57d9ff","#937e88"],
        doughnutHoleSize:0.5
    }
);
myDougnutChart.draw();

以下是結果：

我們的餅狀圖表和圓環圖表看起來挺棒了，但是它會變得更棒，通過添加兩樣東西：

值標簽：顯示每份對應的百分比

圖表圖例：顯示圖表中每個類別和顏色的對應關系

通常，每份的值用百分比來表示，通過100 * 每份值 / 總的值來計算，整個圓代表100%。

例如，在我們的例子數據中，古典音樂可以近似地用26%來表示。 如果能將這個值剛好顯示在對應的份上面就太好了。 要想這樣，我們可以用繪圖上下文的fillText(text, x, y)函數。 這個函數接受三個參數：文本和x，y坐標。

怎樣計算放置文本的x和y坐標呢？ 我們必須動用一些幾何知識了，一個叫做極坐標的東西。 一般地，極坐標用半徑和角度來定義一個點的位置。 我們將要用到的兩個公式是：

x = R * cos(angle)

y = R * sin(angle)

我們將要應用這個公式，將文本放在餅狀圖的半徑的一半位置與每份角度的一半位置處。 要想做它，我們需要修改我們的PieChart類，增加如下代碼在if(this.options.doughnutHoleSize){...}代碼塊中。

...
start_angle = 0;
for (categ in this.options.data){
    val = this.options.data[categ];
    slice_angle = 2 * Math.PI * val / total_value;
    var pieRadius = Math.min(this.canvas.width/2,this.canvas.height/2);
    var labelX = this.canvas.width/2 + (pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
    var labelY = this.canvas.height/2 + (pieRadius / 2) * Math.sin(start_angle + slice_angle/2);
 
    if (this.options.doughnutHoleSize){
        var offset = (pieRadius * this.options.doughnutHoleSize ) / 2;
        labelX = this.canvas.width/2 + (offset + pieRadius / 2) * Math.cos(start_angle + slice_angle/2);
        labelY = this.canvas.height/2 + (offset + pieRadius / 2) * Math.sin(start_angle + slice_angle/2);               
    }
 
    var labelText = Math.round(100 * val / total_value);
    this.ctx.fillStyle = "white";
    this.ctx.font = "bold 20px Arial";
    this.ctx.fillText(labelText+"%", labelX,labelY);
    start_angle += slice_angle;
}
...

上面代碼遍歷每份，計算百分比和位置，然后調用fillText()方法將之繪制到圖表上。 我們用了fillStyle屬性來設置文本顏色為白色，font屬性來設置標簽文本的字體、樣式和大小。 同樣重要，需要注意的是圓環圖的doughnutHoleSize設置后，標簽會被往邊沿推，以使文本能處于圓環圖每份的中央。

以下就是帶值標簽的圖表看起來的樣子：

要想完成圖表，最后一件事就是為圖表添加圖例。 我們的圖表圖例將會顯示數據模型中數據的類別和對應每份的顏色。 首先，我們需要對index.html文件做些修改，添加一個

...
        if (this.options.legend){
            color_index = 0;
            var legendHTML = "";
            for (categ in this.options.data){
                legendHTML += "
  "+categ+"
";
            }
            this.options.legend.innerHTML = legendHTML;
        }
...

var myLegend = document.getElementById("myLegend");
 
var myDougnutChart = new Piechart(
    {
        canvas:myCanvas,
        data:myVinyls,
        colors:["#fde23e","#f16e23", "#57d9ff","#937e88"],
        legend:myLegend
    }
);
myDougnutChart.draw();

• 上一篇：React-router 4 按需加載的實現方式及原理(Code Splitting)
• 下一篇：2017-05-24 前端日報