FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts最新版

時(shí)間序列分析和可視化在企業(yè)和商業(yè)世界中發(fā)揮著關(guān)鍵作用。時(shí)間序列描繪了隨時(shí)間變化或波動(dòng)的變量，因此它是預(yù)測(cè)利潤(rùn)、預(yù)測(cè)、營(yíng)銷等不可或缺的工具。
盡管存在許多用于時(shí)間序列可視化的自動(dòng)化工具，但幾乎沒有任何工具可用于交互式平移、縮放和縮放序列。在手動(dòng)觀察時(shí)間序列時(shí)，任何經(jīng)理、開發(fā)人員或數(shù)據(jù)科學(xué)家都希望在更大的時(shí)間跨度內(nèi)檢查時(shí)間序列，以推斷數(shù)據(jù)的長(zhǎng)期趨勢(shì)。還需要放大系列的一部分以確定變量的短期波動(dòng)。
FusionCharts 帶有一個(gè)很棒的FusionTime 庫(kù)。FusionTime 庫(kù)允許使用時(shí)間導(dǎo)航器功能繪制時(shí)間序列數(shù)據(jù)以進(jìn)行時(shí)間序列分析。時(shí)間導(dǎo)航器允許分析師專注于時(shí)間序列的一部分，同時(shí)保持?jǐn)?shù)據(jù)的整個(gè)長(zhǎng)期趨勢(shì)。在本博客中，我們將構(gòu)建一個(gè)應(yīng)用程序，用于使用時(shí)間導(dǎo)航器組件可視化時(shí)間序列。我們將繪制CalIt2 建筑物人數(shù)統(tǒng)計(jì)數(shù)據(jù)集，該數(shù)據(jù)集顯示進(jìn)出建筑物的人數(shù)。數(shù)據(jù)集將從UCI 機(jī)器學(xué)習(xí)存儲(chǔ)庫(kù)中讀取。

FusionCharts 時(shí)間導(dǎo)航器的功能

時(shí)間序列和時(shí)間導(dǎo)航器組件如下所示。它顯示了從 UCI 的 CalIt2 大樓流出的人員，并具有一些壯觀的時(shí)間導(dǎo)航器功能，注釋如下：

CalIt2 數(shù)據(jù)集

CalIt2 數(shù)據(jù)集的前幾行如下所示：

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

使用時(shí)間導(dǎo)航器創(chuàng)建時(shí)間序列圖的步驟

使用 FusionTime 庫(kù)繪制時(shí)間序列非常簡(jiǎn)單。在這里，我們列出了以下三個(gè)簡(jiǎn)單步驟來創(chuàng)建一個(gè) Webpack 應(yīng)用程序，該應(yīng)用程序顯示帶有時(shí)間導(dǎo)航器組件的時(shí)間序列圖。

第 1 步：項(xiàng)目設(shè)置

創(chuàng)建一個(gè)名為timenavigator的項(xiàng)目目錄。在控制臺(tái)移動(dòng)到項(xiàng)目目錄并鍵入以下內(nèi)容以安裝 Webpack 和 FusionCharts：

npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusioncharts

mkdir src 
touch src/index.js
mkdir dist

要配置項(xiàng)目，請(qǐng)?jiān)谥黜?xiàng)目目錄中創(chuàng)建一個(gè)名為 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: '//archive.ics.uci.edu',
            pathRewrite: { '^/UCIAPI': '//archive.ics.uci.edu/ml/machine-learning-databases/event-detection/CalIt2.data'},
            changeOrigin: true,
         },
       },

     }
};

第 3 步：導(dǎo)入庫(kù)、創(chuàng)建數(shù)據(jù)源、渲染圖表

作為最后一步，將代碼添加到 index.js 文件，執(zhí)行以下操作：

1. 導(dǎo)入必要的 FusionCharts 庫(kù)。
2. 設(shè)置包含要繪制的列的元描述的架構(gòu)。
3. 從 UCI 機(jī)器學(xué)習(xí)存儲(chǔ)庫(kù)讀取數(shù)據(jù)。
4. 將數(shù)據(jù)轉(zhuǎn)換為表格。
5. 設(shè)置數(shù)據(jù)存儲(chǔ)。
6. 創(chuàng)建一個(gè) FusionCharts 實(shí)例并渲染繪圖。

在 index.js 文件中復(fù)制以下代碼：

// 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();

運(yùn)行應(yīng)用程序

npx webpack serve --mode=development

您可以通過導(dǎo)航到 localhost:8080 在瀏覽器中查看該應(yīng)用程序

有更多方法可以可視化時(shí)間序列數(shù)據(jù)嗎？

想要購(gòu)買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊