開始使用Chart.js：PIE，DONUT和BUBBLE圖表

本教程將介紹如何使用Chart.js 創建餅圖、環形圖和氣泡圖。此前，我們已學習了Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達圖和極地區域圖（教程三）。

創建餅圖和環形圖

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

餅圖僅適用於比較單個參數或數據集。需要注意的是，餅圖無法繪製值為零的實體，因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體都將不會顯示在圖表上。同樣，餅圖也無法繪製負值。

在Chart.js 中，通過將type鍵設置為pie可以創建餅圖，將type鍵設置為doughnut可以創建環形圖。以下是一個創建這兩種圖表的示例：

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

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

讓我們創建一個餅圖，展示2015 年五大石油出口國的石油出口數據（單位：十億美元）。

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

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

繪製圖表時可以激活兩種不同的動畫。您可以使用animateRotate鍵指定圖表是否應該具有旋轉動畫。同樣，您還可以使用animateScale鍵指定環形圖是否應該從中心縮放。 animateRotate的值默認為true ， animateScale的值默認為false 。

像往常一樣，您可以分別使用backgroundColor 、 borderColor和borderWidth鍵控制所有數據點的背景顏色、邊框顏色和邊框寬度。同樣，所有這些屬性的懸停值可以使用hoverBackgroundColor 、 hoverBorderColor和hoverBorderWidth鍵來控制。

以下是為上述數據創建環形圖的代碼。將rotation的值設置為-90將起始點設置為逆時針旋轉90 度。

 var oilData = {
  labels: ["沙特阿拉伯", "俄羅斯", "伊拉克", "阿聯酋", "加拿大"],
  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
}); 

創建氣泡圖

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

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

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

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

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

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

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

例如，條形圖中條形的寬度會根據圖表大小而增加或減少。氣泡圖不會發生這種情況。氣泡的半徑始終等於您指定的精確像素數。這是有意義的，因為在這種圖表類型中，半徑實際上用於表示真實數據。

讓我們創建一個氣泡圖來繪製森林中不同地點的鹿群數量。

 var popData = {
  datasets: [
    {
      label: ["鹿群數量"],
      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"
    }
  ]
};

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

與所有其他圖表類型一樣，您可以使用backgroundColor 、 borderColor和borderWidth鍵控制繪製點的背景顏色、邊框顏色和邊框寬度。同樣，您還可以使用hoverBackgroundColor 、 hoverBorderColor和hoverBorderWidth鍵指定懸停背景顏色、懸停邊框顏色和懸停邊框寬度。

您還可以使用hoverRadius鍵指定要在懸停時添加到不同氣泡的額外半徑。請記住，此半徑將添加到原始值以繪製懸停的氣泡。如果原始氣泡的半徑為10，而hoverRadius設置為5，則懸停時氣泡的半徑將等於15。

 var popData = {
  datasets: [
    {
      label: ["鹿群數量"],
      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: ["長頸鹿數量"],
      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: "不同熱點地區的動物數量",
      font: {
        size: 20
      }
    },
    legend: {
      position: "bottom",
      align: "center"
    }
  },
  layout: {
    padding: 20
  }
};

上述參數將創建以下氣泡圖。

總結

在本教程中，您學習了Chart.js 中提供的另外三種圖表類型。您現在應該能夠選擇合適的圖表類型來繪製數據，並為不同的鍵設置特定值來控制其外觀。在下一個教程中，您將學習如何操作不同圖表類型的刻度。

以上是開始使用Chart.js：PIE，DONUT和BUBBLE圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章！