本教程將介紹如何使用Chart.js 創(chuàng)建餅圖、環(huán)形圖和氣泡圖。此前，我們已學(xué)習(xí)了Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達(dá)圖和極地區(qū)域圖（教程三）。

創(chuàng)建餅圖和環(huán)形圖

餅圖和環(huán)形圖非常適合展示某個(gè)整體被劃分為不同部分的比例。例如，可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比，或不同候選人在選舉中獲得的投票百分比。

餅圖僅適用於比較單個(gè)參數(shù)或數(shù)據(jù)集。需要注意的是，餅圖無法繪製值為零的實(shí)體，因?yàn)轱瀳D中扇形的角度取決於數(shù)據(jù)點(diǎn)的數(shù)值大小。這意味著任何占比為零的實(shí)體都將不會顯示在圖表上。同樣，餅圖也無法繪製負(fù)值。

在Chart.js 中，通過將type鍵設(shè)置為pie可以創(chuàng)建餅圖，將type鍵設(shè)置為doughnut可以創(chuàng)建環(huán)形圖。以下是一個(gè)創(chuàng)建這兩種圖表的示例：

 var pieChart = new Chart(votesCanvas, {
    type: 'pie',
    data: votesData,
    options: chartOptions
});

var doughnutChart = new Chart(votesCanvas, {
    type: 'doughnut',
    data: votesData,
    options: chartOptions
});

讓我們創(chuàng)建一個(gè)餅圖，展示2015 年五大石油出口國的石油出口數(shù)據(jù)（單位：十億美元）。

 var data = {
    labels: [
        "沙烏地阿拉伯",
        "俄羅斯",
        "伊拉克",
        "阿聯(lián)酋",
        "加拿大"
    ],
    datasets: [
        {
            data: [133.3, 86.2, 52.2, 51.2, 50.2],
            backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
            ]
        }]
}; 

您可以使用不同的鍵來控制上述圖表的顯示，例如cutout ，它可以是數(shù)字或字符串。如果指定為數(shù)字，則該值被認(rèn)為是像素值；如果指定為以%結(jié)尾的字符串，則該值被認(rèn)為是總半徑的百分比。您可以使用rotation鍵指定圖表的起始角度。同樣，您還可以使用circumference鍵指定圖表在繪製數(shù)據(jù)時(shí)掃描的角度。這兩個(gè)角度都以度數(shù)而不是弧度表示。

繪製圖表時(shí)可以激活兩種不同的動畫。您可以使用animateRotate鍵指定圖表是否應(yīng)該具有旋轉(zhuǎn)動畫。同樣，您還可以使用animateScale鍵指定環(huán)形圖是否應(yīng)該從中心縮放。 animateRotate的值默認(rèn)為true ， animateScale的值默認(rèn)為false 。

像往常一樣，您可以分別使用backgroundColor 、 borderColor和borderWidth鍵控制所有數(shù)據(jù)點(diǎn)的背景顏色、邊框顏色和邊框?qū)挾?。同樣，所有這些屬性的懸停值可以使用hoverBackgroundColor 、 hoverBorderColor和hoverBorderWidth鍵來控制。

以下是為上述數(shù)據(jù)創(chuàng)建環(huán)形圖的代碼。將rotation的值設(shè)置為-90將起始點(diǎn)設(shè)置為逆時(shí)針旋轉(zhuǎn)90 度。

 var oilData = {
  labels: ["沙特阿拉伯", "俄羅斯", "伊拉克", "阿聯(lián)酋", "加拿大"],
  datasets: [
    {
      data: [133.3, 86.2, 52.2, 51.2, 50.2],
      backgroundColor: ["#FF6384", "#63FF84", "#84FF63", "#8463FF", "#6384FF"],
      borderColor: "black",
      borderWidth: 2
    }
  ]
};

var chartOptions = {
  rotation: -90,
  cutout: "45%",
  plugins: {
    title: {
      display: true,
      position: "bottom",
      text: "2015 年主要石油出口國",
      font: {
        size: 32
      }
    },
    legend: {
      position: "left",
      align: "start"
    }
  },
  animation: {
    animateRotate: false,
    animateScale: true
  }
};

var donutChart = new Chart(oilCanvas, {
  type: "doughnut",
  data: oilData,
  options: chartOptions
}); 

創(chuàng)建氣泡圖

氣泡圖用於在圖表上繪製或顯示數(shù)據(jù)的三個(gè)維度( p1 、 p2 、 p3 )。氣泡的位置和大小決定了這三個(gè)數(shù)據(jù)點(diǎn)的值。水平軸表示第一個(gè)數(shù)據(jù)點(diǎn)(p1)，垂直軸表示第二個(gè)數(shù)據(jù)點(diǎn)( p2 )，氣泡的面積用於表示第三個(gè)數(shù)據(jù)點(diǎn)( p3 ) 的值。

需要注意的是，第三個(gè)數(shù)據(jù)點(diǎn)的大小不是由氣泡的半徑表示，而是由它們的面積表示。圓的面積與半徑的平方成正比。這意味著您必須確保您繪製的氣泡半徑與第三個(gè)數(shù)據(jù)點(diǎn)大小的平方根成正比。

在Chart.js 中，通過將type鍵的值設(shè)置為bubble可以創(chuàng)建氣泡圖。以下是如何創(chuàng)建氣泡圖的示例：

 var bubbleChart = new Chart(popCanvas, {
    type: 'bubble',
    data: popData,
    options: chartOptions
});

讓我們使用氣泡圖繪製房間裡不同物品的重量。圖表的數(shù)據(jù)需要以對象的格式傳遞。數(shù)據(jù)對象需要具有以下接口才能正確繪製。

 {
    x:<number> ,
    y:<number> ,
    r:<number>
}</number></number></number>

氣泡圖與所有其他圖表的一個(gè)重要區(qū)別在於氣泡半徑不會隨圖表縮放。

例如，條形圖中條形的寬度會根據(jù)圖表大小而增加或減少。氣泡圖不會發(fā)生這種情況。氣泡的半徑始終等於您指定的精確像素?cái)?shù)。這是有意義的，因?yàn)樵谶@種圖表類型中，半徑實(shí)際上用於表示真實(shí)數(shù)據(jù)。

讓我們創(chuàng)建一個(gè)氣泡圖來繪製森林中不同地點(diǎn)的鹿群數(shù)量。

 var popData = {
  datasets: [
    {
      label: ["鹿群數(shù)量"],
      data: [
        { x: 100, y: 0, r: 10 },
        { x: 60, y: 30, r: 20 },
        { x: 40, y: 60, r: 25 },
        { x: 80, y: 80, r: 30 },
        { x: 20, y: 30, r: 25 },
        { x: 0, y: 100, r: 5 }
      ],
      backgroundColor: "#FF9966"
    }
  ]
};

由於這裡的半徑與實(shí)際數(shù)量的平方根成正比，因此(80, 80) 處的鹿的數(shù)量是(0, 100) 處的鹿的數(shù)量的36 倍。

與所有其他圖表類型一樣，您可以使用backgroundColor 、 borderColor和borderWidth鍵控制繪製點(diǎn)的背景顏色、邊框顏色和邊框?qū)挾?。同樣，您還可以使用hoverBackgroundColor 、 hoverBorderColor和hoverBorderWidth鍵指定懸停背景顏色、懸停邊框顏色和懸停邊框?qū)挾取?/p>

您還可以使用hoverRadius鍵指定要在懸停時(shí)添加到不同氣泡的額外半徑。請記住，此半徑將添加到原始值以繪製懸停的氣泡。如果原始?xì)馀莸陌霃綖?0，而hoverRadius設(shè)置為5，則懸停時(shí)氣泡的半徑將等於15。

 var popData = {
  datasets: [
    {
      label: ["鹿群數(shù)量"],
      data: [
        { x: 100, y: 0, r: 10 },
        { x: 60, y: 30, r: 20 },
        { x: 40, y: 60, r: 25 }
      ],
      backgroundColor: "#9966FF",
      hoverBackgroundColor: "#FFFFFF",
      hoverBorderColor: "#9966FF",
      hoverBorderWidth: 5,
      hoverRadius: 5
    },
    {
      label: ["長頸鹿數(shù)量"],
      data: [
        { x: 80, y: 80, r: 30 },
        { x: 20, y: 30, r: 25 },
        { x: 0, y: 100, r: 5 }
      ],
      backgroundColor: "#FF6600",
      hoverBackgroundColor: "#FFFFFF",
      hoverBorderColor: "#FF6600",
      hoverBorderWidth: 5,
      hoverRadius: 5
    }
  ]
};

var chartOptions = {
  plugins: {
    title: {
      display: true,
      position: "bottom",
      text: "不同熱點(diǎn)地區(qū)的動物數(shù)量",
      font: {
        size: 20
      }
    },
    legend: {
      position: "bottom",
      align: "center"
    }
  },
  layout: {
    padding: 20
  }
};

上述參數(shù)將創(chuàng)建以下氣泡圖。

總結(jié)

在本教程中，您學(xué)習(xí)了Chart.js 中提供的另外三種圖表類型。您現(xiàn)在應(yīng)該能夠選擇合適的圖表類型來繪製數(shù)據(jù)，並為不同的鍵設(shè)置特定值來控制其外觀。在下一個(gè)教程中，您將學(xué)習(xí)如何操作不同圖表類型的刻度。

以上是開始使用Chart.js：PIE，DONUT和BUBBLE圖表的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！