当前位置：首页 > 行业动态 > 正文

不用库 js 饼图

“ ，，，，Pie Chart，， .slice {， position: absolute;， transform-origin: 50% 50%;， }，，，，，，，，，，，“

使用原生 JavaScript 绘制饼图

在不使用任何外部库的情况下，我们可以通过原生 JavaScript、HTML 和 CSS 来绘制一个饼图，以下是详细的步骤和示例代码：

1. 准备 HTML 结构

我们需要一个基本的 HTML 结构来容纳我们的饼图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pie Chart with Native JavaScript</title>
    <style>
        #chart {
            width: 400px;
            height: 400px;
            position: relative;
            border-radius: 50%;
            border: 2px solid #ccc;
        }
        .slice {
            position: absolute;
            width: 100%;
            height: 100%;
            clip: rect(0px, 200px, 200px, 0px);
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script src="piechart.js"></script>
</body>
</html>

2. 编写 JavaScript 逻辑

我们在piechart.js 文件中编写绘制饼图的逻辑。

document.addEventListener('DOMContentLoaded', function () {
    const data = [
        { value: 30, color: '#FF6384' },
        { value: 70, color: '#36A2EB' }
    ];
    const total = data.reduce((acc, item) => acc + item.value, 0);
    let startAngle = 0;
    data.forEach(item => {
        const sliceAngle = (item.value / total)  2  Math.PI;
        const endAngle = startAngle + sliceAngle;
        const midAngle = startAngle + (sliceAngle / 2);
        const x = 50 + (Math.cos(midAngle)  100);
        const y = 50 + (Math.sin(midAngle)  100);
        const largeArcFlag = sliceAngle > Math.PI ? 1 : 0;
        const pathData = [M 50 50,L ${x} ${y},A 50 50 0 ${largeArcFlag} 1 ${x} ${y},Z
        ].join(' ');
        const slice = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        slice.setAttribute('d', pathData);
        slice.setAttribute('fill', item.color);
        slice.className = 'slice';
        document.getElementById('chart').appendChild(slice);
        startAngle = endAngle;
    });
});

3. 解释代码

HTML 部分

我们创建了一个div 元素，ID 为chart，用于容纳饼图。

不用库 js 饼图

通过内联样式设置了一些基本样式，包括宽度、高度、边框等。

clip 属性用于裁剪路径，使其呈现扇形效果。

JavaScript 部分

使用DOMContentLoaded 事件确保在 DOM 完全加载后执行脚本。

定义了数据数组data，每个对象包含value（值）和color（颜色）。

计算总值total。

遍历数据数组，对于每个数据项：

计算起始角度startAngle 和结束角度endAngle。

根据角度计算中间点坐标(x, y)。

不用库 js 饼图

构建路径数据pathData，包括移动到中心点、画线到边缘点、画弧回到中心点并闭合路径。

创建path 元素，设置其路径数据和填充颜色，然后添加到chart 容器中。

更新startAngle 为当前切片的结束角度。

FAQs

Q1: 如何修改饼图的数据？

A1: 你只需要修改data 数组中的值和颜色即可，如果你有三个数据项，你可以这样修改：

const data = [
    { value: 20, color: '#FF6384' },
    { value: 30, color: '#36A2EB' },
    { value: 50, color: '#FFCE56' }
];

Q2: 如何改变饼图的大小？

A2: 你可以通过修改#chart 元素的宽度和高度样式属性来改变饼图的大小，将宽度和高度都设置为 600px：

#chart {
    width: 600px;
    height: 600px;
}

需要相应地调整路径数据中的半径值，从原来的50 改为300（即半径为宽度或高度的一半）。

javascript数据可视化饼图

相关文章