Highcharts 百万点散点图代码｜散点图

这是一段Highcharts 超高性能散点图scatter代码用于渲染 100 万个数据点使用GPU 加速boost 模块生成随机正切波分布的散点图案极快渲染、支持 XY 缩放、无卡顿代码解读1. 数据生成部分js// 准备数据 const data [], n 1000000; // 生成 100 万个点js// 循环生成 100 万个随机散点 for (let i 0; i n; i 1) { const theta Math.random() * 2 * Math.PI; // 随机角度 0~360° const radius Math.pow(Math.random(), 2) * 100; // 随机半径指数分布更密集在中心 const waveDeviation (Math.random() - 0.5) * 70; // 波动偏移 const waveValue Math.tan(theta) * waveDeviation; // 正切函数形成波浪形状 // 极坐标转直角坐标存入数据 data.push([ 50 (radius waveValue) * Math.cos(theta), // X 50 (radius waveValue) * Math.sin(theta) // Y ]); }✔ 生成效果圆形分布中心密集、外围稀疏正切函数tan(theta)形成放射状波浪图案2. 模块检查必须加载 boostjsif (!Highcharts.Series.prototype.renderCanvas) { throw Module not loaded; }作用检查是否加载boost.jsGPU 加速模块没加载就报错。3. 性能计时控制台查看渲染速度jsconsole.time(scatter); ...图表代码... console.timeEnd(scatter);作用在控制台输出渲染 100 万点花费的时间。4. 图表配置超高性能模式chartjschart: { zooming: { type: xy }, // 支持 XY 双向缩放 height: 100% // 高度占满容器 }boostGPU 加速核心jsboost: { useGPUTranslations: true, // 使用 GPU 计算坐标 usePreAllocated: true // 预分配内存加速渲染 }✔作用让 100 万点不卡顿xAxis / yAxisjsxAxis: { min: 0, max: 100, gridLineWidth: 1, tickWidth: 0 }, yAxis: { min: 0, max: 100, lineWidth:1 }固定坐标范围避免自动计算进一步提速。series散点系列jsseries: [{ type: scatter, // 散点图 color: rgba(222, 73, 138, 0.1), // 半透明粉色 data: data, // 100 万数据 marker: { radius: 0.5 } // 点极小提升性能 }]三、这段代码的核心用途✔ 专业场景大数据量可视化高性能散点图演示GPU 加速boost官方标准示例随机分布 / 数学图案生成✔ 特点可渲染100 万1000 万点缩放流畅浏览器不崩溃极快渲染通常 100ms四、一句话总结这是一段 Highcharts 官方风格的高性能百万点散点图代码使用 GPU 加速、极坐标随机算法生成放射状波浪图案专门用于展示大数据量下的高性能渲染能力。