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

音频图表入门

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

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

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

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

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

安装

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

功能亮点

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

您的第一个音频图表

HTML:

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

html 复制代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<button id="sonify">Play chart</button>
<div id="container"></div>

在上述HTML中，我们定义了一个容器，用于创建图表（id="container"），以及一个用来触发播放图表的按钮

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

JavaScript:

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

js 复制代码

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

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

js 复制代码

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

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