动态主从图表是什么图表——双图联动的时间序列图表主图 明细图上方大图明细图显示选中区间的详细数据下方小图主图显示全部数据可拖拽选择区间这是主图 明细图联动拖拽选择区间上方图表自动放大显示的经典 Highcharts 案例。图表显示如何添加第二个图表以接近Highcharts中的股票导航功能。单击并拖动下方图表以放大上方图表。HTML全代码保存为 HTML → 打开就能用!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title美元欧元汇率 - 主图明细图联动/title style #container { width: 100%; height: 700px; position: relative; } #detail-container { height: 80%; } #master-container { height: 20%; position: absolute; bottom: 0; left: 0; right: 0; } /style script srchttps://code.highcharts.com/highcharts.js/script /head body div idcontainer/div script (async () { // 1. 加载美元兑欧元汇率历史数据 const data await fetch( https://www.highcharts.com/samples/data/usdeur.json ).then(response response.json()); let detailChart; // 上方明细图表 // // 2. 创建【上方明细图表】显示选中区间的详细曲线 // function createDetail(masterChart) { const detailData []; const detailStart data[0][0]; // 数据起始时间 // 提取主图中需要显示到明细图的数据 masterChart.series[0].data.forEach(point { if (point.x detailStart) { detailData.push(point.y); } }); // 初始化明细图表 detailChart Highcharts.chart(detail-container, { chart: { marginBottom: 120, reflow: false, marginLeft: 60, marginRight: 20, style: { position: absolute } }, credits: { enabled: false }, // 隐藏版权 title: { text: 美元兑欧元历史汇率, align: left }, subtitle: { text: 在下方图表中拖动鼠标选择区间, align: left }, xAxis: { type: datetime }, // 时间轴 yAxis: { title: { text: null }, maxZoom: 0.1 }, // 悬浮提示框 tooltip: { format: b{series.name}/bbr/{x:%a, %b %e, %Y}:br/1 USD {y:.2f} EUR, shared: true }, legend: { enabled: false }, // 数据点样式 plotOptions: { series: { marker: { enabled: false, states: { hover: { enabled: true, radius: 3 } } } } }, // 数据系列 series: [{ name: USD to EUR, pointStart: detailStart, pointInterval: 24 * 3600 * 1000, // 一天一个点 data: detailData }], exporting: { enabled: false } }); } // // 3. 创建【下方主图表】可拖拽选择时间区间 // function createMaster() { const maskFill rgba(0,0,255,0.05); // 未选中区域半透明遮罩 Highcharts.chart(master-container, { chart: { reflow: false, borderWidth: 0, backgroundColor: null, marginLeft: 60, marginRight: 20, zooming: { type: x }, // 横向缩放 // // 核心拖拽选择区间触发事件 // selection: function (event) { const min event.xAxis[0].min; const max event.xAxis[0].max; const detailData []; // 提取选中区间内的数据 this.series[0].data.forEach(point { if (point.x min point.x max) { detailData.push([point.x, point.y]); } }); // 更新遮罩层未选中区域变灰 const xAxis this.xAxis[0]; xAxis.removePlotBand(mask-before); xAxis.addPlotBand({ id: mask-before, from: data[0][0], to: min, color: maskFill }); xAxis.removePlotBand(mask-after); xAxis.addPlotBand({ id: mask-after, from: max, to: data[data.length - 1][0], color: maskFill }); // 将选中数据更新到上方明细图 detailChart.series[0].setData(detailData); return false; } }, title: { text: null }, xAxis: { type: datetime, maxZoom: 14 * 24 * 3600000, // 最小14天 plotBands: [{ id: mask-before, from: data[0][0], to: data[data.length - 1][0], color: maskFill }] }, yAxis: { gridLineWidth: 0, labels: { enabled: false }, min: 0.6 }, plotOptions: { series: { fillColor: { linearGradient: [0, 0, 0, 70], stops: [ [0, Highcharts.getOptions().colors[0]], [1, rgba(255,255,255,0)] ] }, lineWidth: 1, marker: { enabled: false }, enableMouseTracking: false } }, series: [{ type: area, name: USD to EUR, pointInterval: 24 * 3600 * 1000, pointStart: data[0][0], data: data }], exporting: { enabled: false } }, createDetail); // 创建完成后 → 初始化明细图 } // // 4. 创建两个图表容器上方明细 下方主图 // const container document.getElementById(container); container.style.position relative; container.innerHTML div iddetail-container/div div idmaster-container/div ; // 启动先创建主图 createMaster(); })(); /script /body /html核心功能✅你在下方图表拖动鼠标✅上方图表自动放大显示该段数据✅未选中区域自动变灰遮罩层✅实时切换、无刷新、流畅交互这是金融、股票、气象、监控仪表盘最常用的交互模式。技术亮点异步加载远程 JSON双图表联动通信拖拽选区selection 事件动态更新数据遮罩层高亮选中区间时间轴格式化悬浮提示美观适用场景股票 K 线、走势图汇率、价格监控服务器监控、温度监控任何需要区间放大查看的图表
