如何制作疫情饼状统计图

本文将从多个方面详细阐述疫情饼状统计图的制作方法和注意事项。

一、选择数据源

在制作疫情饼状统计图之前，需要先选择数据源。最好选择权威可靠的数据来源，比如世界卫生组织等组织发布的数据。如果是初学者，可以选择一些比较简单的数据进行实践。

// 示例代码
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/n/375510.html