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

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

包含要展示的數(shù)據(jù)的數(shù)據(jù)模型。 這由特定類型的圖表進(jìn)行結(jié)構(gòu)化。

圖形化展示是指按照數(shù)學(xué)公式的規(guī)則，將數(shù)據(jù)模型中的數(shù)據(jù)通過視覺元素來進(jìn)行展示。

餅狀圖數(shù)據(jù)模型
結(jié)構(gòu)化餅狀圖數(shù)據(jù)的方式中，最常用的就是用一系列的類別和對(duì)應(yīng)的值，每個(gè)類別的值與餅圖的份相關(guān)聯(lián)。

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

古典音樂：10

另類搖滾：14

流行：2

爵士：12

我們可以在script.js文件中添加一個(gè)JS對(duì)象來存儲(chǔ)數(shù)據(jù)模型，如下：

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

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

我的音樂集有四個(gè)類別。 每個(gè)類別在餅形圖中的份數(shù)大小，與它的類別對(duì)應(yīng)的值成正比。

但是我們?cè)鯓佣攘糠輸?shù)的大小？ 簡(jiǎn)單--我們通過每份的角度。 我們所需要知道的就是它占360度或者2PI的份數(shù)。 那么半圓就是180deg或者PI，1/4圓90度或PI/2，以此類推。

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

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

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

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

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

data：盛放數(shù)據(jù)模型的對(duì)象的索引

colors：一個(gè)數(shù)組，數(shù)組中是每份的顏色。

PieChart類同時(shí)也包含一個(gè)draw()方法，它來對(duì)圖表進(jìn)行實(shí)際的繪制。

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參數(shù)進(jìn)行存儲(chǔ)。 它保存了canvas的索引，同時(shí)也創(chuàng)建一個(gè)繪畫上下文作為類成員變量。 然后它存儲(chǔ)了options中的colors數(shù)組。

接下來的部分是最根本的，函數(shù)draw()。 它會(huì)從數(shù)據(jù)模型中提取數(shù)據(jù)。 首先，它計(jì)算數(shù)據(jù)模型中所有數(shù)據(jù)值的和。 然后對(duì)其中每個(gè)類別應(yīng)用上面提到的計(jì)算角度的函數(shù)。 最后我們調(diào)用drawPieSlice()函數(shù)，用canvas的中心作為餅狀圖的中心。 至于半徑，我們用canvas寬度的一半與canvas高度的一半的較小值，因?yàn)槲覀儾幌胱岋灎顖D超出canvas。

同樣，每次畫一個(gè)類別時(shí)，要偏移每份的起始角度和結(jié)束角度，否則會(huì)發(fā)生重疊。

要想使用類，我們必須先創(chuàng)建一個(gè)實(shí)例對(duì)象，然后在創(chuàng)建的對(duì)象上調(diào)用draw()方法。

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

結(jié)果看起來如下這樣:

我們已經(jīng)看到如何創(chuàng)建餅狀圖。 同樣我們看到，圓環(huán)圖與餅狀圖不同之處僅在于中間多了一個(gè)洞。 怎樣畫洞呢？ 我們可以畫一個(gè)白色的圓在餅狀圖上。

讓我們通過修改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參數(shù)中，通過一個(gè)doughnutHoleSize成員變量。 如果這個(gè)參數(shù)在options中沒有傳，代碼就按照之前的進(jìn)行繪制，如果傳了，就在餅狀圖中心畫一個(gè)白色的圓形。

圓的半徑由餅形圖的半徑和doughnutHoleSize參數(shù)的乘積來決定。 它應(yīng)該是0到1之間的數(shù)字，0代表餅形圖，大于0時(shí)，值越大餅形圖中間的洞越大，當(dāng)值為1時(shí)會(huì)使圖表不可見。

要想畫一個(gè)圖表一半大小的圓環(huán)圖，我們可以將doughnutHoleSize設(shè)置為0.5，然后像下面這樣調(diào)用：

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

以下是結(jié)果：

我們的餅狀圖表和圓環(huán)圖表看起來挺棒了，但是它會(huì)變得更棒，通過添加兩樣?xùn)|西：

值標(biāo)簽：顯示每份對(duì)應(yīng)的百分比

圖表圖例：顯示圖表中每個(gè)類別和顏色的對(duì)應(yīng)關(guān)系

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

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

怎樣計(jì)算放置文本的x和y坐標(biāo)呢？ 我們必須動(dòng)用一些幾何知識(shí)了，一個(gè)叫做極坐標(biāo)的東西。 一般地，極坐標(biāo)用半徑和角度來定義一個(gè)點(diǎn)的位置。 我們將要用到的兩個(gè)公式是：

x = R * cos(angle)

y = R * sin(angle)

我們將要應(yīng)用這個(gè)公式，將文本放在餅狀圖的半徑的一半位置與每份角度的一半位置處。 要想做它，我們需要修改我們的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;
}
...

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

以下就是帶值標(biāo)簽的圖表看起來的樣子：

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

...
        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 按需加載的實(shí)現(xiàn)方式及原理(Code Splitting)
• 下一篇：2017-05-24 前端日?qǐng)?bào)