使用 Highcharts 库可视化您的时间序列数据
作者：Margo Schaedel / 产品, 用例, 开发者
2018 年 4 月 19 日
导航至
过去已经有一些关于使用不同的图表库（例如这个与 plotly.js 的集成或这个关于 Rickshaw 库的帖子）可视化时间序列数据的帖子。今天，我们将看看图表库 Highcharts——这是满足您数据可视化需求的另一个出色工具。当然，如果您不想引入外部图形库，您可以随时查看 Grafana 或 Chronograf。Grafana 可以轻松地与 InfluxDB 集成，而 Chronograf 的构建目的就是与 InfluxDB 一起使用。
<figcaption> 我们著名的 InfluxDB I’iwi</figcaption>
不过，在我们开始将这些图表放到页面上之前，您需要确保您已经启动并运行了 InfluxDB 实例。您可以获取 TICK Stack 的所有组件在本地设置，或者在我们的便捷 沙箱 模式中启动堆栈。
我最近发布了一篇关于 Node-influx 客户端库的 入门指南，作为与 InfluxDB 集成的选项，而不必一定使用 Telegraf 来收集您的数据。此可视化是使用来自该帖子的相同海洋潮汐数据构建的。如果您想查看最终产品，可以从 此处 克隆 repo。
第一步
引入库是我们的第一步。我在 index.html 文件的 head 部分添加了以下 script 标签。
<script src="https://code.highcharts.com/highcharts.js"></script>对于 index.html 文件的 body，您需要一个 div 容器，其 id 为“container”，以便我们稍后可以在脚本文件中定位它，如下所示
<div id="container"></div>Highcharts 图表将在此容器中呈现。
在我们的服务器文件中，我们已经设置了一个端点来查询来自海洋潮汐数据库的数据（见下文），因此我们需要在我们的脚本文件中获取数据并将其设置到我们的 Highcharts 构造函数中。
app.get('/api/v1/tide/:place', (request, response) => {
const { place } = request.params;
influx.query(`
select * from tide
where location =~ /(?i)(${place})/
`)
.then( result => response.status(200).json(result) )
.catch( error => response.status(500).json({ error }) );
});在脚本文件中，我编写了一个简单的 fetch 函数，用于检索基于传入的位置名称的数据。
const fetchData = (place) => {
return fetch(`/api/v1/tide/${place}`)
.then(res => {
if (res.status !== 200) {
console.log(res);
}
return res;
})
.then(res => res.json())
.catch(error => console.log(error));
}为了获取四个不同位置的所有数据，我使用了 Promise.all()，然后更改了结果以适应 Highcharts 文档中引用的所需格式。
return Promise.all([
fetchData('hilo'),
fetchData('hanalei'),
fetchData('honolulu'),
fetchData('kahului')
])
.then(parsedRes => {
const mutatedArray = parsedRes.map( arr => {
return Object.assign({}, {
name: arr[0].location,
data: arr.map( obj => Object.assign({}, {
x: (moment(obj.time).unix())*1000,
y:obj.height
}))
});
});
})
.catch(error => console.log(error));现在我们已经准备好数据，我们可以构建我们的图表了。
Highcharts.chart('container', {
colors: ['#508991', '#175456', '#09BC8A', '#78CAD2'],
chart: {
backgroundColor: {
linearGradient: [0, 600, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(161, 210, 206)']
]
},
type: 'spline'
},
title: {
text: 'Hawaii Ocean Tides',
style: {
'color': '#175456',
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Height (ft)'
}
},
plotOptions: {
series: {
turboThreshold: 2000,
}
},
series: mutatedArray
});这里肯定有很多事情在发生。Highcharts 库附带方法 chart()，它接受两个参数：要在其中呈现图表的目标元素和一个选项对象，您可以在其中指定各种属性，例如样式、标题、图例、系列、类型、plotOptions 等。让我们逐一介绍每个选项。
- colors: [array] - colors 属性接受一个十六进制代码数组，该数组将表示图表的默认配色方案。如果所有颜色都用完了，则任何需要的新颜色都将导致数组再次循环。
- chart: {object} - chart 属性接受一个对象，其中包含各种附加属性，包括类型、zoomtype、animation、events、description 和许多样式属性。在此实例中，我为背景赋予了线性渐变，并将类型指定为 spline。
- title: {object} - 这表示图表的主标题，并且可以额外赋予一个样式对象以使其更具活力。
- xAxis: {object} - 在这种情况下，因为我使用的是时间序列数据，所以我知道 x 轴将始终是时间，因此我可以将类型指定为“datetime”，并且比例将自动调整为适当的时间单位。但是，这里还有许多其他选项，包括样式、标签、自定义刻度线位置以及对数或线性类型。
- yAxis: {object} - 与 xAxis 属性类似，y 轴也接受一个对象，并且可以访问许多选项来自定义图表 y 轴的设计和样式。在这种情况下，我只指定了 y 轴标题，并推迟到 Highcharts 自动刻度线位置。
- plotOptions: {object} - plotOptions 属性是每个系列类型的配置对象的包装对象。也可以为系列数组中给出的单个系列项覆盖每个系列的配置对象。在这里，我使用了 plotOptions.series 属性来覆盖默认的 turboThreshold 1000 并将其更改为 2000。这允许绘制更多的数据点（超过默认的 1000 个）。根据文档，系列配置选项在三个不同的级别访问。如果您想定位图表中的所有系列，您可以使用 plotOptions.series 对象。对于特定类型的系列，您将访问该类型的 plotOptions。例如，要定位类型为“line”的图表类型的 plotOptions，您将访问 plotOptions.line 对象。最后，特定系列的选项在 series 属性中给出（请参阅下一个要点）。
- series: [array] or {object} - 这是您传入数据的地方。您还可以定义要传入的数据类型，为其命名，并为其定义其他 plotOptions。
查看结果！
<figcaption> 多么波涛汹涌！（明白了吗？- 你知道，因为海洋……和潮汐。）</figcaption>
此信息实际上仅涵盖了冰山一角。就您可以使用 Highcharts 图形库创建的内容而言，可能性似乎无穷无尽。为什么不看看他们的 文档 或 演示，并告诉我们您使用 InfluxDB 和 Highcharts 的新作品？有问题和意见？您可以随时通过 Twitter 联系我们：@mschae16 或 @influxDB。祝您制图愉快！
