当前位置：首页 > news >正文

数学函数双曲线音频图表（y=1/x 双曲线）｜图表代码示例

news 2026/5/26 21:37:51

制作一个简单的演示，展示了如何通过音线进行音化。在这种情况下，我们对方程 y = 1 / x 进行了音化。该图在 x=0 处有一个垂直渐近线，y=0 处有一个水平渐近线，形成了一个双曲形状，函数接近但从不接触 X 轴和 Y 轴。

完整可运行HTML代码

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数学函数音频可视化</title> <style> body { margin:0; padding:10px; height: 100vh; box-sizing:border-box; } #sonify { padding: 8px 22px; font-size:14px; background:#2f7ed8; color:white; border:none; border-radius:4px; cursor:pointer; margin-bottom:10px; } #container { height: calc(100% - 50px); } </style> </head> <body> <button id="sonify">播放音频可视化</button> <div id="container"></div> <script src="https://code.highcharts.com/11.4.0/highcharts.js"></script> <script src="https://code.highcharts.com/11.4.0/modules/sonification.js"></script> <script src="https://code.highcharts.com/11.4.0/modules/accessibility.js"></script> <script> // 生成数据：y = 1/x 双曲线 const data = []; for (let x = -6; x < 6; x += 0.01) { data.push([ x, Math.round(x * 100) ? 1 / x : null ]); } // 创建图表 const chart = Highcharts.chart('container', { chart: { height: '100%' }, title: { text: '数学函数音频可视化', align: 'left' }, sonification: { duration: 8000, defaultInstrumentOptions: { instrument: 'basic1', roundToMusicalNotes: false } }, accessibility: { landmarkVerbosity: 'one' }, xAxis: { min: -6, max: 6, gridLineWidth: 1, tickInterval: 1, crossing: 0 }, yAxis: { min: -6, max: 6, tickInterval: 1, lineWidth: 1, crossing: 0, title: { text: null } }, legend: { enabled: false }, tooltip: { headerFormat: '', pointFormat: 'y = {point.y:.2f}' }, series: [{ data: data }] }); // 修复按钮点击：强制激活音频上下文，永远不会无反应 document.getElementById('sonify').addEventListener('click', async function () { // 解决浏览器音频拦截 if (window.AudioContext || window.webkitAudioContext) { const tempCtx = new (window.AudioContext || window.webkitAudioContext)(); await tempCtx.resume(); } chart.toggleSonify(); }); </script> </body> </html>

本案例对函数y = 1/x进行音频化处理。该图像在x=0处存在垂直渐近线，在y=0处存在水平渐近线，整体呈现双曲线形态；函数曲线无限靠近 X 轴与 Y 轴，但永远不会与坐标轴相交。