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

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

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

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

在 Chart.js 中，通過(guò)將 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 年五大石油出口國(guó)的石油出口數(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"
            ]
        }]
};

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

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

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

以下是為上述數(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 年主要石油出口國(guó)",
      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 中，通過(guò)將 type 鍵的值設(shè)置為 bubble 可以創(chuàng)建氣泡圖。以下是如何創(chuàng)建氣泡圖的示例：

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

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

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

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

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

讓我們創(chuàng)建一個(gè)氣泡圖來(lái)繪制森林中不同地點(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í)添加到不同氣泡的額外半徑。請(qǐng)記住，此半徑將添加到原始值以繪制懸停的氣泡。如果原始?xì)馀莸陌霃綖?10，而 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: ["長(zhǎng)頸鹿數(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ū)的動(dòng)物數(shù)量",
      font: {
        size: 20
      }
    },
    legend: {
      position: "bottom",
      align: "center"
    }
  },
  layout: {
    padding: 20
  }
};

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

總結(jié)

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

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