如何製作疫情餅狀統計圖

本文將從多個方面詳細闡述疫情餅狀統計圖的製作方法和注意事項。

一、選擇數據源

在製作疫情餅狀統計圖之前，需要先選擇數據源。最好選擇權威可靠的數據來源，比如世界衛生組織等組織發布的數據。如果是初學者，可以選擇一些比較簡單的數據進行實踐。

// 示例代碼
let data = [
  { label: '確診', value: 1000 },
  { label: '治癒', value: 500 },
  { label: '死亡', value: 80 }
];

二、準備畫布

在HTML文件中準備一個畫布，可以使用canvas或svg。這裡我們使用svg進行舉例。需要注意畫布的寬高以及顏色搭配。

// 示例代碼

三、繪製餅狀圖

繪製餅狀統計圖的代碼比較複雜，需要用到數學計算和svg路徑的繪製。具體代碼可以參考下面的示例代碼。

// 示例代碼
function drawPieChart(data, radius) {
  let total = data.reduce((acc, curr) => acc + curr.value, 0);
  let startAngle = 0;
  let endAngle = 0;
  let colors = ['#f9d5e5', '#eeac99', '#e06377', '#c83349', '#8b0000'];
  let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  for (let i = 0; i < data.length; i++) {
    let percent = data[i].value / total;
    endAngle = startAngle + percent * 2 * Math.PI;
    let x1 = radius * Math.sin(startAngle);
    let y1 = -radius * Math.cos(startAngle);
    let x2 = radius * Math.sin(endAngle);
    let y2 = -radius * Math.cos(endAngle);
    let largeArcFlag = percent > 0.5 ? 1 : 0;
    let pathData = `M 0 0 L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`;
    let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttributeNS(null, 'fill', colors[i % colors.length]);
    path.setAttributeNS(null, 'd', pathData);
    g.appendChild(path);

    startAngle = endAngle;
  }
  return g;
}

let svg = document.querySelector('svg');
let g = drawPieChart(data, 200);
svg.appendChild(g);

四、添加標籤和說明

為了讓餅狀圖更加清晰明了，可以添加標籤和說明。可以使用svg中的text元素來添加文字，並進行位置和樣式的控制。

// 示例代碼
let labels = ['確診', '治癒', '死亡'];
for (let i = 0; i < data.length; i++) {
  let percent = ((data[i].value / total) * 100).toFixed(1);
  let x = 270 * Math.sin((startAngle + endAngle) / 2);
  let y = -270 * Math.cos((startAngle + endAngle) / 2);
  let text = `${labels[i]}：${data[i].value} (${percent}%)`;
  let textElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  textElem.setAttributeNS(null, 'x', x);
  textElem.setAttributeNS(null, 'y', y);
  textElem.innerHTML = text;
  g.appendChild(textElem);
  startAngle = endAngle;
}

五、完整代碼：疫情餅狀統計圖

下面是完整的HTML代碼，包括數據源、畫布準備、繪製餅狀圖、添加標籤和說明等步驟。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>疫情餅狀統計圖</title>
</head>
<body>
  <svg width="500" height="500">
    <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
    <g transform="translate(250,250)">
    </g>
  </svg>

  <script>
    let data = [
      { label: '確診', value: 1000 },
      { label: '治癒', value: 500 },
      { label: '死亡', value: 80 }
    ];

    function drawPieChart(data, radius) {
      let total = data.reduce((acc, curr) => acc + curr.value, 0);
      let startAngle = 0;
      let endAngle = 0;
      let colors = ['#f9d5e5', '#eeac99', '#e06377', '#c83349', '#8b0000'];
      let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      for (let i = 0; i < data.length; i++) {
        let percent = data[i].value / total;
        endAngle = startAngle + percent * 2 * Math.PI;
        let x1 = radius * Math.sin(startAngle);
        let y1 = -radius * Math.cos(startAngle);
        let x2 = radius * Math.sin(endAngle);
        let y2 = -radius * Math.cos(endAngle);
        let largeArcFlag = percent > 0.5 ? 1 : 0;
        let pathData = `M 0 0 L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`;
        let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttributeNS(null, 'fill', colors[i % colors.length]);
        path.setAttributeNS(null, 'd', pathData);
        g.appendChild(path);

        startAngle = endAngle;
      }
      return g;
    }

    let svg = document.querySelector('svg');
    let g = drawPieChart(data, 200);
    svg.appendChild(g);

    let labels = ['確診', '治癒', '死亡'];
    for (let i = 0; i < data.length; i++) {
      let percent = ((data[i].value / total) * 100).toFixed(1);
      let x = 270 * Math.sin((startAngle + endAngle) / 2);
      let y = -270 * Math.cos((startAngle + endAngle) / 2);
      let text = `${labels[i]}：${data[i].value} (${percent}%)`;
      let textElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      textElem.setAttributeNS(null, 'x', x);
      textElem.setAttributeNS(null, 'y', y);
      textElem.innerHTML = text;
      g.appendChild(textElem);
      startAngle = endAngle;
    }
  </script>
</body>
</html>

原創文章，作者：VTXZL，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/375510.html