使用 Highcharts 库可视化您的时序数据
作者：Margo Schaedel / 产品，用例，开发者
2018 年 4 月 19 日
导航到
过去我们已经发表了几篇关于使用不同的图表库可视化时序数据的文章，例如这篇与 plotly.js 的集成或这篇关于 Rickshaw 库的文章。今天，我们将看看图表库 Highcharts——这是您数据可视化需求中的另一个强大工具。当然，如果您不想引入外部图表库，您始终可以检查 Grafana 或 Chronograf。Grafana 可以轻松与 InfluxDB 集成，而 Chronograf 则是专门为与 InfluxDB 一起使用而构建的。
<figcaption> 我们著名的 InfluxDB I’iwi</figcaption>
在开始将这些图表添加到页面之前，您需要确保 InfluxDB 的一个实例已经启动并运行。您可以在本地设置 TICK Stack 的所有组件，或者在方便的 sandbox 模式下启动堆栈。
我最近发布了一篇关于 Node-influx 客户端库入门指南，这是一个选项，用于在不必要使用 Telegraf 收集数据的情况下集成 InfluxDB。这个可视化是使用那篇文章中的相同的海洋潮汐数据构建的。如果您想查看最终产品，可以在这里克隆仓库。
第一步
引入库是我们的第一步。我向 index.html 文件的 head 部分添加了以下 script 标签。
<script src="https://code.highcharts.com/highcharts.js"></script>您需要在 index.html 文件的 body 部分添加一个具有 id 为 'container' 的容器 div，这样我们就可以在脚本文件中定位它，如下所示
<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 }) );
});在脚本文件中，我编写了一个简单的获取函数，它根据传入的位置名称检索数据。
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: [数组] - 颜色属性接受一个十六进制代码数组，该数组将代表图表的默认颜色方案。如果所有颜色都用完了，需要的新颜色将再次循环遍历数组。
- chart: {对象} - 图表属性接受一个对象，其中包含各种额外的属性，包括类型、缩放类型、动画、事件、描述以及许多样式属性。在这种情况下，我给背景添加了线性渐变，并指定了类型为 spline。
- title: {对象} - 这表示图表的主要标题，还可以额外提供样式对象以使内容更生动。
- xAxis: {对象} - 在这个场景中，因为我使用的是时间序列数据，我知道x轴将始终是时间，因此我可以指定类型为 'datetime'，刻度将自动调整为合适的时间单位。然而，这里还有许多其他选项，包括样式、标签、自定义刻度位置和对数或线性类型。
- yAxis: {对象} - 与 xAxis 属性类似，y轴也接受一个对象，并提供许多选项来自定义图表的y轴的设计和样式。在这种情况下，我只指定了y轴标题，并委托 Highcharts 自动放置刻度。
- plotOptions: {对象} - plotOptions 属性是每个系列类型的配置对象的包装对象。每个系列的配置对象也可以在系列数组中针对单个系列项进行覆盖。在这里，我使用了 plotOptions.series 属性来覆盖默认的 turboThreshold 1000，并将其更改为 2000。这允许绘制更多的数据点（超过默认的 1000）。根据文档，系列配置选项可以通过三个不同级别访问。如果你想针对图表中的所有系列，你会使用 plotOptions.series 对象。对于特定类型的系列，你会访问该类型的 plotOptions。例如，要针对类型为 'line' 的图表的 plotOptions，你会访问 plotOptions.line 对象。最后，特定系列的选项在 series 属性中给出（见下一点）。
- 系列: [数组] 或 {对象} - 这是您传递数据的入口。您还可以定义要传递数据的类型，给它一个名称，并定义额外的绘图选项。
查看结果！
<figcaption> 多么波浪形！（明白了吗？因为海洋和潮汐。）</figcaption>
这些信息仅仅触及冰山一角。在Highcharts图形库中创建的可能性似乎是无限的。为何不去看看他们的文档或示例，并让我们了解您用InfluxDB和Highcharts创作的新作品？有疑问和评论？您可以通过Twitter联系我们：@mschae16 或 @influxDB。祝您绘图愉快！
