HTML怎么做散点图_html散点图scatter chart实现【基础】-html教程-PHP中文网

最直接方式是用手动画散点图，关键在于将数据坐标线性映射为像素坐标并翻转y轴；chart.js需注意数据格式与坐标轴配置；svg适合静态无交互场景；避免后端生成图片方案。

html怎么做散点图_html散点图scatter chart实现【基础】

用 `<canvas></canvas>` 手动画散点图最直接

HTML 本身不提供散点图组件，<canvas></canvas> 是最轻量、可控性最强的实现方式。适合数据量不大（比如几百个点）、需要自定义样式或交互逻辑的场景。

关键不是“画图”，而是把数据坐标映射到像素坐标——这一步最容易出错：

横纵轴范围要先算出数据的 min 和 max，再做线性缩放，别直接用原始数值当像素值
canvas 的 y 轴向下为正，而数学坐标系 y 向上为正，必须翻转： y_px = height - (y_data - y_min) / (y_max - y_min) * height
点太小看不清？至少设 ctx.fillStyle = '#3b82f6' 并用 ctx.fillRect(x-2, y-2, 4, 4) 或 ctx.arc() 画实心圆

用 Chart.js 的 `scatter` 类型省事但要注意配置

Chart.js 支持原生散点图，但默认行为和你想象的可能不一样：它会自动按 x 值排序，且 x/y 轴默认是数值轴（type: 'linear'），不是分类轴。

常见踩坑点：

数据格式必须是对象数组：[{x: 1.2, y: 3.5}, {x: 2.7, y: 1.8}]，不能传两个平行数组
如果 x 是时间（如 '2023-01-01'），得显式设 xAxis.type = 'time' 并引入 chartjs-adapter-date-fns
点大小固定？改 pointRadius；想按数据大小缩放？得用 pointRadius: function(ctx) { return Math.sqrt(ctx.raw.y) * 2; }

用 SVG 手写 `<circle></circle>` 适合静态图或服务端渲染

如果图表不需交互、只展示一次（比如邮件报表、PDF 导出前的 HTML 预览），纯 SVG 更语义清晰、缩放不失真。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

核心就是循环生成 <circle></circle> 标签：

<svg width="600" height="400" viewbox="0 0 600 400"><circle cx="120" cy="320" r="4" fill="#10b981"></circle><circle cx="240" cy="260" r="4" fill="#8b5cf6"></circle></svg>

注意：viewBox 定义坐标系范围，比写死 width/height 更灵活；所有坐标都要提前归一化到 viewBox 范围内，否则点会跑出画布。