散点图开发示例｜Highcharts 奥运运动员身高体重散点图 代码

这是一个异步加载真实数据 多系列散点图案例从远程加载2012 奥运运动员数据按篮球 / 铁人三项 / 排球分组展示X 轴身高 (m)Y 轴体重 (kg)每种运动用不同颜色 不同标记形状区分支持鼠标悬浮提示、XY 缩放、数据抖动防重叠关键亮点功能说明多系列区分篮球 圆形 / 蓝色铁人三项 三角形 / 绿色排球 方形 / 橙色jitter 抖动让完全重叠的点轻微偏移图表更易观察半透明颜色点重叠时会显示更深的颜色密度直观可见异步真实数据不是模拟数据是真实的奥运运动员数据悬浮提示鼠标移上去显示身高 体重完整修代码!DOCTYPE html html head meta charsetUTF-8 title奥运运动员身高体重散点图/title script srchttps://code.highcharts.com/highcharts.js/script /head body div idcontainer stylewidth:100%;height:600px;/div script Highcharts.setOptions({ colors: [ rgba(5,141,199,0.5), rgba(80,180,50,0.5), rgba(237,86,27,0.5) ] }); const series [{ name: Basketball, id: basketball, marker: { symbol: circle } }, { name: Triathlon, id: triathlon, marker: { symbol: triangle } }, { name: Volleyball, id: volleyball, marker: { symbol: square } }]; async function getData() { const response await fetch(https://www.highcharts.com/samples/data/olympic2012.json); return response.json(); } getData().then(data { const getData sportName { const temp []; data.forEach(elm { if (elm.sport sportName elm.weight 0 elm.height 0) { temp.push([elm.height, elm.weight]); } }); return temp; }; series.forEach(s { s.data getData(s.id); }); Highcharts.chart(container, { chart: { type: scatter, zooming: { type: xy } }, title: { text: Olympics athletes by height and weight }, subtitle: { text: Source: The Guardian }, xAxis: { title: { text: Height }, labels: { format: {value} m } }, yAxis: { title: { text: Weight }, labels: { format: {value} kg } }, legend: { enabled: true }, plotOptions: { scatter: { marker: { radius: 2.5 }, jitter: { x: 0.005 } } }, tooltip: { pointFormat: Height: {point.x} m br/ Weight: {point.y} kg }, series }); }); /script /body /html