使用交互式时间序列图增强 Javascript 图表时间导航

翻译|使用教程|编辑:杨鹏连|2021-07-29 09:36:37.920|阅读 22 次

概述:时间序列分析和可视化在企业和商业世界中发挥着关键作用。时间序列描绘了随时间变化或波动的变量,因此它是预测利润、预测、营销等不可或缺的工具。

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XTPowerCharts XT 、FusionWidgets XTFusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案,目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。

点击下载FusionCharts最新版

时间序列分析和可视化在企业和商业世界中发挥着关键作用。时间序列描绘了随时间变化或波动的变量,因此它是预测利润、预测、营销等不可或缺的工具。
尽管存在许多用于时间序列可视化的自动化工具,但几乎没有任何工具可用于交互式平移、缩放和缩放序列。在手动观察时间序列时,任何经理、开发人员或数据科学家都希望在更大的时间跨度内检查时间序列,以推断数据的长期趋势。还需要放大系列的一部分以确定变量的短期波动。
FusionCharts 带有一个很棒的FusionTime 库。FusionTime 库允许使用时间导航器功能绘制时间序列数据以进行时间序列分析。时间导航器允许分析师专注于时间序列的一部分,同时保持数据的整个长期趋势。在本博客中,我们将构建一个应用程序,用于使用时间导航器组件可视化时间序列。我们将绘制CalIt2 建筑物人数统计数据集,该数据集显示进出建筑物的人数。数据集将从UCI 机器学习存储库中读取。

FusionCharts 时间导航器的功能

时间序列和时间导航器组件如下所示。它显示了从 UCI 的 CalIt2 大楼流出的人员,并具有一些壮观的时间导航器功能,注释如下:

时间序列特征
缩放:FusionCharts 时间序列允许用户更详细地缩放和显示较小的时间段。时间导航器,显示时间序列的哪些部分已被缩放。
平移:用户可以移动时间导航窗口的滚动条,查看图表的特定固定时间段。
滚动:用户可以移动时间序列本身的数据点来向左或向右移动序列。
悬停数据点平均值:当鼠标悬停在数据点上时,显示该数据点的值。对于较大时间跨度的缩小图,会显示平均值或数据点。
自定义:FusionCharts 允许完全自定义所有内容,从轴标签到标题、刻度标记标签和图形颜色。
更改时间段:左上角允许用户选择不同的时间段来显示时间序列。
数据格式:要绘制的数据可以以JSON或简单表格的形式输入。这使得从所有类型的数据源创建绘图变得非常容易。

CalIt2 数据集

CalIt2 数据集的前几行如下所示:

7,07/24/05,00:00:00,0
9,07/24/05,00:00:00,0
7,07/24/05,00:30:00,1
9,07/24/05,00:30:00,0
7,07/24/05,01:00:00,0
数据是逗号分隔的表格。第一列是流出 7 和流入 9。我们将只绘制流出。第二列和第三列是日期和时间。最后一列是人数。

使用时间导航器创建时间序列图的步骤

使用 FusionTime 库绘制时间序列非常简单。在这里,我们列出了以下三个简单步骤来创建一个 Webpack 应用程序,该应用程序显示带有时间导航器组件的时间序列图。

第 1 步:项目设置

创建一个名为timenavigator的项目目录。在控制台移动到项目目录并键入以下内容以安装 Webpack 和 FusionCharts:

npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusioncharts
在项目目录下创建dist和src子目录。此外,创建一个空文件 index.js,其中将包含项目的源代码。在控制台中,键入以下内容:
mkdir src 
touch src/index.js
mkdir dist
第 2 步:项目配置

要配置项目,请在主项目目录中创建一个名为 webpack.config.js 的文件,并在其中添加以下代码:

// webpack.config.js
const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
module.exports = {
   context: __dirname,
   entry: './src/index.js',
   output: {
      path: path.resolve( __dirname, 'dist' ),
      filename: 'main.js',
   },

   plugins: [
      new HtmlWebPackPlugin()
   ],
   devServer: {
       headers: {
           "Access-Control-Allow-Origin": "*",
           "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
           "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
         },
       proxy: {
         '/UCIAPI': {
            target: 'https://archive.ics.uci.edu',
            pathRewrite: { '^/UCIAPI': 'https://archive.ics.uci.edu/ml/machine-learning-databases/event-detection/CalIt2.data'},
            changeOrigin: true,
         },
       },

     }
};
上述配置包括一个代理,用于防止从 UCI 机器学习存储库读取数据时出现 CORS 错误。

第 3 步:导入库、创建数据源、渲染图表

作为最后一步,将代码添加到 index.js 文件,执行以下操作:

  1. 导入必要的 FusionCharts 库。
  2. 设置包含要绘制的列的元描述的架构。
  3. 从 UCI 机器学习存储库读取数据。
  4. 将数据转换为表格。
  5. 设置数据存储。
  6. 创建一个 FusionCharts 实例并渲染绘图。

在 index.js 文件中复制以下代码:

// src/index.js

//Import section
import FusionCharts from 'fusioncharts/core';
import TimeSeries from 'fusioncharts/viz/timeseries';
import DataStore from 'fusioncharts/datastore';

//Add the div tag for the chart container
const myDiv = document.createElement('div');
myDiv.id = 'container';
document.body.appendChild(myDiv);

//Set up the schema for two table columns
let schema = [{
    "name": "Date",
    "type": "date",
    "format": "%-m/%-d/%Y %-I:%-M:%-S"
}, {
    "name": "Outflow of People",
    "type": "number"
}]

//main function read data and call renderPage
async function main() {
    //Get the data
    let response = await fetch('/UCIAPI');
    let text = await response.text();
    if (response.ok){        
        renderPage(text);
    }
    else {
        alert('Error reading data from ML repository');
    }
}

//Convert the UCI ML data to two column table and draw chart
//renders the html page when passed data as text
function renderPage(text){
    //Convert data to table
    var data = textToMatrix(text);
    //Draw teh chart with this data
    drawChart(data);
}

//convert text to matrix. The data read from UCI ML repository is comma separated
function textToMatrix(text){
    var matrix = [];
    var rows = text.split("\n");
    for(var i=0;i<rows.length;i++){
        var cols = rows[i].split(',');
        //7 is out flow in CalIt2.data
        if (cols.length > 1 && cols[0] == 7)
            var dataRow = [cols[1].concat(' ', cols[2]), parseInt(cols[3])]
            matrix.push(dataRow);
    }
    return matrix;
}

//Render the final chart
function drawChart(data){
    FusionCharts.addDep(TimeSeries);

    let fusionDataStore = new DataStore();
    let fusionTable = fusionDataStore.createDataTable(data, schema);

    window.charInstance = new FusionCharts({
        type: 'timeseries',
        renderAt: 'container',
        width: "90%",
        height: 650,
        dataSource: {
            data: fusionTable,
            caption: {
                text: 'Outflow Of People From CalIt2 Building At UCI, Source: UCI ML repository'
            }
        }
    });

    //Render the chart
    window.charInstance.render();
}

main();


运行应用程序

要运行该应用程序,请在控制台中键入以下内容:
npx webpack serve --mode=development

您可以通过导航到 localhost:8080 在浏览器中查看该应用程序

有更多方法可以可视化时间序列数据吗?

如果您正在寻找快速简便的方法在您的应用程序中添加漂亮的图表和绘图,FusionCharts 就是您的最佳选择。FusionCharts 包括 100 多个图表和 2000 多个交互式地图。FusionTime 模块可让您创建从基本到更复杂的具有数百万个数据点的多元序列的时间序列。FusionTime 包括开箱即用的交互性,如时间导航器、日期范围选择器、交互式图例等等。最好的部分是在 Javascript 中创建时间序列只需要几行代码。

想要购买FusionCharts Suite XT正版授权,或了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:InfoSoft

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

在线咨询
联系我们
TOP
在线客服系统
live chat