当前位置：首页 > news >正文

01-通过纯js理解数据驱动图表概念

news 来源：原创 2025/5/21 6:32:18

现有1组一维数组数据：

const data = [720, 320, 531, 120, 230, 387, 258]

通过forEach循环该data，根据数据值，循环出对应长度的 rect 标签，计算好横纵坐标的位置，并在最后将各个 rect标签 append 到 svg 标签中。如图所示，在浏览器中的坐标原点在左上角，向右为x轴正方向，向下为y轴正方向，由于不需要考虑y轴的反向计算，横向柱图的生成会比竖向柱图的生成更加简单。

竖向柱图的生成思路如下：

data.forEach((d, i) => {const rectTag = document.createElementNS('http://www.w3.org/2000/svg', 'rect')rectTag.setAttribute('x', (i * (barWidth + barPad)))rectTag.setAttribute('y', (maxHeight - d / maxValue * maxHeight) + 24)rectTag.setAttribute('width', barWidth)rectTag.setAttribute('height', (d / maxValue * maxHeight))todaySvg.append(rectTag)
})

【完整代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><main><h1>Chart</h1><svg width="900" height="200"></svg></main><script text="script">const data = [720, 320, 531, 120, 230, 387, 258]const todaySvg = document.querySelector('svg')const barWidth = 24const barPad = 12const maxHeight = 112const maxValue = Math.max(...data)data.forEach((d, i) => {const rectTag = document.createElementNS('http://www.w3.org/2000/svg', 'rect')rectTag.setAttribute('x', (i * (barWidth + barPad)))rectTag.setAttribute('y', (maxHeight - d / maxValue * maxHeight) + 24)rectTag.setAttribute('width', barWidth)rectTag.setAttribute('height', (d / maxValue * maxHeight))todaySvg.append(rectTag)})</script></body></html>

【注】先理解好如何通过数组的forEach来生成不同的svg元素（将图表的思路重心放在data上），能够更好地理解D3.js的原理及其使用。