如何用Chart.Js实现时间序列数据的可视化

DebugUsery
886 阅读6分钟

用Chart.Js实现时间序列数据的可视化

时间序列数据是一组随着时间推移而进行的测量和观察。数据的可视化使用户更容易理解具体信息。

本教程将帮助读者了解如何使用Chart.js和InfluxDB实现时间序列数据的可视化。

InfluxDB是一个考虑到时间序列数据而创建的数据库。通过结合InfluxDB的功能和Chart.js的灵活性和力量，你可以有效地展示时间序列数据。

前提条件

要跟上进度，你需要一些HTML、CSS和JavaScript的知识。请注意，我们将使用VS Code编辑器作为我们的开发环境。

时间序列数据

在记录不断演变的数据时，时间是一个关键因素。这种数据使人们能够了解过去并预测未来。

时间序列数据存在于商业、金融、经济和健康等领域。它也可以在其他科学领域找到，这些领域往往显示出一些模式，如趋势、季节性波动、不规则周期和变化性。

时间序列数据是从现实世界中收集的，并由计算机进行分析，生成图形和分析输出。

数据分析的结果为我们提供了关于现实世界的更多信息。数据可以按年、按季、按月、按日，甚至按小时收集。

时间序列数据的例子

  • 股票市场。这个市场是高度波动和时间敏感的。因此，只要有交易，就必须监测和记录数据。

  • 在医疗保健行业，时间序列数据被用来监测服用特定药物的病人的心率。这确保他们的心率在任何时候都不会波动太大。

  • 天气预报员使用时间序列数据来预测不同的星期和月份的温度是多少。

  • 零售企业使用时间序列数据来跟踪他们在一段时间内的总销售额。

时间序列数据的方方面面

  • 趋势：系列的总体方向。
  • 季节性：当数据中的重复行为以固定的时间间隔发生时，就会出现。
  • 周期性：当一个系列遵循一个非季节性的上升和下降趋势时出现。
  • 无法解释的变化。

用Chart.js和InfluxDB实现时间序列数据的可视化

Chart.js概述

Chart.js是一个开源的库，帮助用户使用JavaScript轻松实现数据的可视化。Chart.js类似于Google Charts和D3。

大多数开发者喜欢Chart.js，因为它简单、灵活、轻量级、可靠。此外，它允许我们使用HTML5画布元素创建干净、优雅和响应式的图表，以实现有效的沟通。

用Chart.js建立一个项目

有几种方法可以开始使用Chart.js。在我们的案例中，我们将使用一个CDN。

要开始使用，请打开VS Code，并创建一个文件夹，用来存放项目文件。接下来，在该文件夹中创建index.html 、script.js 和style.css 文件。

在index.html 文件中添加以下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <title>Visualizing Time Series Data with Chart.js</title>
</head>
<body>
    <h1>Chart.js</h1>
    <canvas id="charts" style="width:100%;max-width:700px"></canvas>

    <script src="script.js"></script>
    
</body>
</html>

如前所述，Chart.js中存在各种类型的图表。在本教程中，我们将使用线图和柱状图。在掌握了这些概念后，你将有专业知识和信心来处理各种图表。

为了开发时间序列数据，我们将使用一个泵每天消耗的汽油的数据集，单位是升。

var days = ["Mon", "Tue", "Wed", "Thur","Fri", "Sat", "Sun"];
var litres = [150, 90, 95, 130, 85, 180, 85];
Chart.js直线图

将图表类型设置为line ，以生成一个线形图。我们需要在index.html 文件中包含我们的script.js 和style.css 文件。

在script.js 文件中添加以下代码。

charts = document.getElementById("charts");//html canvas
//values of x and y axes
var days = ["Mon", "Tue", "Wed", "Thur","Fri", "Sat", "Sun"];//x axes
var litres = [150, 90, 95, 130, 85, 180, 85];//y axes
//create a line chart
new Chart(charts, {
    type: 'line', //This is a line chart
    data: {
    labels: days, //x-axes data 
    datasets: [{
        label:"Line Chart",
    data: litres, //y-axes data 
    borderColor: 'black',
    fill: false,
    }]
    },
   });

在style.css 文件中添加以下代码，用于网页的样式设计。

body{
    background-color:black;
   }
   h1{
    color: black;
    margin-left:4px;
   }
   #charts{
    margin:auto;
    background-color: white;
   }

输出。Line Chart

Chart.js条形图

以同样的方式，我们在上面指定了图表类型；你需要将图表类型修改为bar 。

在处理条形图时，不需要fill 这个选项，因为它们默认继承了背景颜色。

继续将下面的片段添加到script.js 文件中。

charts = document.getElementById("charts");//html canvas
//values of x and y axes
var days = ["Mon", "Tue", "Wed", "Thur","Fri", "Sat", "Sun"];//x axes
var litres = [150, 90, 95, 130, 85, 180, 85];//y axes
//create a line chart
new Chart(charts, {
    type: 'bar', //Declare bar chart
    data: {
    labels: days, //x-axes data 
    datasets: [{
        label:"Bar Chart",
    data: litres, //y-axes data 
    backgroundColor: 'black',//bar charts color
    }]
    },
    options:{
        legend: {display:false},
    }
   });

style.css 文件。

body{
    background-color:white;
   }
   h1{
    color: black;
    margin-left:4px;
   }
   #charts{
    margin:auto;
    background-color: cyan;
   }

输出。

Bar Chart

InfluxDB概述

InfluxDB是一个用Go语言编写的开源时间序列数据库，由Influx data开发。

它被设计用来快速存储和检索时间序列数据。此外，它与合适的平台无缝衔接，以收集、存储和分析数据。

设置InfluxDB

要开始使用InfluxDB，请到其官方网站上下载。

必须要有一个InstanceDB的实例并运行。此外，注册一个免费的InfluxDB云账户。

InfluxDB

我们将安装InfluxDB 2.1版，然后选择Windows作为所需平台。接下来，点击URL，下载将默认开始。

当下载完成后，解压文件到你想要的位置。在我们的例子中，它是在Programs Files 文件夹中。

Extract file

通过导航到命令提示符并运行以下命令来启动InfluxDB服务器。

cd C:\Program Files\InfluxData\Influxdb\influxdb2-2.1.1-windows-amd64

Command Prompt

要启动InfluxDB，运行命令influxd.exe 。你应该看到下面的输出。

Start InfluxDB

我们将需要在InfluxDB云端创建一个账户。然后安装InfluxDB客户端库。

InfluxDB Cloud

我们将安装InfluxDB的Javascript客户端库，它是一个Node.js模块，在application 。

npm init -y influx-node-app
npm install @influxdata/influxdb-client

使用Flux来查询InfluxDB云的数据

Flux是一种功能性的、可扩展的、可组合的数据脚本语言，为时间序列数据而设计。

它对数据进行查询、分析和操作，然后将结果可视化。它支持从各种来源查询数据，包括CSV和SQL。

Flux创建了一些可组合的函数，作为构建模块使用。Flux查询从数据源检索数据，根据时间或列值进行过滤，处理数据，并返回结果。

在InfluxDB中，我们有作为数据库的桶。要创建一个桶，请在左侧导航并选择Load Data ，如下图所示。

Load Data

接下来，创建一个bucket，如下图所示。你可以快速地用数据填充它，并提交一个查询。

Bucket

一旦你提交了查询数据，就会出现时间序列数据的可视化。

Visualize data

总结

Chart.js是一个具有众多功能的图形库。

InfluxDB是一个时间序列数据库，可以使用柱状图和散点图来存储、分析和可视化数据。

在本教程中，我们了解了时间序列数据以及如何使用Charts.js和InfluxDB分析和可视化这类数据。

我们还建立了一个可视化时间序列信息的工作实例，并使用Flux从InfluxDB云中查询数据。

avatar
文章
阅读
粉丝