news 2026/6/10 0:25:38

用 Highcharts如何创建一个音频图表

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
用 Highcharts如何创建一个音频图表

音频图表入门

Highcharts 支持通过 sonification 模块实现音频图表。本教程将引导你配置该模块,并介绍一些关键功能,帮助你开始构建音频图表。

从科学角度来看,声化(sonification)是用非语音的声音传达信息或感知数据的统称。它在我们周围随处可见,比如一只祖父钟每秒钟发出一次清脆的滴答声,每小时还会敲响钟声。

在数据可视化中,声音化技术使人们可以在没有视觉辅助的情况下探索数据。它通过利用听觉而非视觉帮助人们理解数据。这对于视力障碍者或在难以通过视觉解读数据的场景中特别有帮助,但也可以用来打造更具吸引力的数据可视化体验,或者提醒用户注意事项。

使用声化技术处理大型数据集可能带来显著的无障碍优势,许多盲人或低视力用户发现声化有助于快速了解数据的整体情况,以及识别趋势、模式、异常值和关注点。

在Highcharts中,我们提供了一个声化模块,允许你完全控制用声音播放数据。该声化模块支持多种不同的应用场景,并且设计时考虑了极大的灵活性。

安装

需要引入sonification.js模块。该模块添加了 Chart.sonify, Chart.toggleSonify, Series.sonify, and Point.sonify,等函数,以及多个辅助类、方法和用于控制图表播放的各种功能。

功能亮点

  • 内置轻量级合成器,配备多个预设,适用于各种乐器和音效
  • 语音支持
  • 支持导航功能,包括时间线过滤和拖动
  • 扩展且灵活的数据映射到音频和语音参数
  • 使用多个轨道叠加声音
  • 映射到音乐音阶
  • 支持多轴和对数轴
  • 上下文轨道/提示
  • 条件轨道和耳机提示音
  • MIDI导出

您的第一个音频图表

HTML:

让我们从所需的HTML开始,这里我们从CDN加载Highcharts模块:

<scriptsrc="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://code.highcharts.com/modules/sonification.js"></script><scriptsrc="https://code.highcharts.com/modules/accessibility.js"></script><buttonid="sonify">Play chart</button><divid="container"></div>

在上述HTML中,我们定义了一个容器,用于创建图表(id=“container”),以及一个用来触发播放图表的按钮

如果我们包含了导出模块Export module,那么在图表菜单中会出现一个播放图表的菜单项,但这里我们保持简单,只添加一个按钮 (id="sonify").

JavaScript:

我们可以从一个包含两个数据系列的基础图表开始:

constchart=Highcharts.chart('container',{title:{text:'Audio chart'},series:[{data:[4,5,6,5,7,9,11,13]},{data:[1,3,4,2]}]});

我们还需要添加一些代码来处理按钮被点击时的情况:

document.getElementById('sonify').onclick=()=>chart.toggleSonify();

其实这就是全部内容!点击“播放图表”按钮将会使用默认的声音配置播放图表。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/27 4:25:15

从零构建ZYNQ的DMA数据高速公路:AN108模块的AXI-Stream实战解析

从零构建ZYNQ的DMA数据高速公路&#xff1a;AN108模块的AXI-Stream实战解析 在嵌入式系统设计中&#xff0c;数据的高速传输一直是工程师们面临的重大挑战。当涉及到FPGA与处理器的协同工作时&#xff0c;如何构建高效的数据通道尤为关键。本文将深入探讨基于Xilinx ZYNQ平台的…

作者头像 李华
网站建设 2026/5/27 18:38:25

手把手教你用AI净界RMBG-1.4制作透明PNG表情包

手把手教你用AI净界RMBG-1.4制作透明PNG表情包 1. 为什么做表情包一定要用“发丝级”抠图&#xff1f; 你有没有试过用手机APP抠一张毛茸茸的猫脸&#xff0c;结果边缘全是锯齿&#xff1f;或者给AI生成的二次元头像换背景&#xff0c;头发丝和背景糊成一片&#xff0c;怎么调…

作者头像 李华
网站建设 2026/6/4 16:55:50

3个步骤打造ComfyUI模型路径配置终极指南:从混乱到系统化管理

3个步骤打造ComfyUI模型路径配置终极指南&#xff1a;从混乱到系统化管理 【免费下载链接】ComfyUI-Manager 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Manager 当你同时管理10模型、5自定义节点扩展时&#xff0c;是否经常遇到模型路径找不到、节点安装位…

作者头像 李华
网站建设 2026/5/30 0:18:17

零基础使用StructBERT:中文文本情感分类实战教程

零基础使用StructBERT&#xff1a;中文文本情感分类实战教程 1. 为什么你需要一个“开箱即用”的中文情感分析工具&#xff1f; 你有没有遇到过这些场景&#xff1a; 运营同事发来200条用户评论&#xff0c;问你“大家对新功能整体评价怎么样&#xff1f;”客服主管让你快速…

作者头像 李华