用数据绘图（1）：用 Highcharts 打造你的数据艺术世界
在 AI 自动生成图像的时代，用代码“绘图”似乎有点多此一举。
然而，借助 Highcharts，我们不仅能用数据“画”出图像，更能深入理解数据结构与图形渲染逻辑。这篇文章将带你用 areasplinerange 系列，从零构建一个“水下世界”。
一、灵感与目标
灵感来源于动画《Jungle Beat》中的一只优雅章鱼，她想用 Highcharts 重现那种水母般的流动效果。截取一帧画面，再手绘简化草图，作为“海底场景”的绘制模板。
二、图表基础配置
首先创建一个空白的 Highcharts 图表，关闭多余元素：
const chart = Highcharts.chart('container', {chart: {plotBackgroundImage: 'sea.png',margin: 0},legend: { enabled: false },credits: { enabled: false },title: { text: null },xAxis: [{ min: 0, max: 20, visible: false }],yAxis: [{ min: 0, max: 20, visible: false }],series: []
});
三、选择合适的系列类型
想要画出柔和流线的海底轮廓？areasplinerange 系列最合适不过。在该系列中，每个点包含三个值：
-
x：横坐标； -
low：下边界； -
high：上边界。
这些点连接后，会形成一条平滑的曲线，并填充上下边界间的阴影区域，完美模拟柔软的波浪或地形变化。
四、开始绘制：投点成形
以下示例绘制了左侧的一条“水草形状”：
chart.addSeries({type: 'areasplinerange',color: 'rgba(46, 204, 113, 0.6)',fillOpacity: 0.6,data: [{ x: 0.5, low: 2, high: 15 },{ x: 1, low: 3, high: 14 },{ x: 1.5, low: 2, high: 12 },{ x: 2, low: 1, high: 10 }]
});
效果如下图，随着更多点加入，整个“水底曲线”开始有了生命感。
五、添加生命元素：动画的魔力
为了让整个场景动起来，可以为 areasplinerange 加入 animation 参数或使用动态更新数据。例如：
setInterval(() => {const series = chart.series[0];series.setData(series.data.map(p => ({x: p.x,low: p.low + Math.sin(Date.now() / 1000) * 0.2,high: p.high + Math.cos(Date.now() / 1000) * 0.2})));
}, 80);
这样，水草将会轻轻“摆动”，宛如海洋生物在水中摇曳。
