翻譯|使用教程|編輯:楊鵬連|2021-07-29 09:36:37.920|閱讀 245 次
概述:時間序列分析和可視化在企業和商業世界中發揮著關鍵作用。時間序列描繪了隨時間變化或波動的變量,因此它是預測利潤、預測、營銷等不可或缺的工具。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包,其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案,目前在全球有45萬用戶選擇Fusioncharts來制作專業的JavaScript圖表。
	時間序列分析和可視化在企業和商業世界中發揮著關鍵作用。時間序列描繪了隨時間變化或波動的變量,因此它是預測利潤、預測、營銷等不可或缺的工具。
盡管存在許多用于時間序列可視化的自動化工具,但幾乎沒有任何工具可用于交互式平移、縮放和縮放序列。在手動觀察時間序列時,任何經理、開發人員或數據科學家都希望在更大的時間跨度內檢查時間序列,以推斷數據的長期趨勢。還需要放大系列的一部分以確定變量的短期波動。
FusionCharts 帶有一個很棒的FusionTime 庫。FusionTime 庫允許使用時間導航器功能繪制時間序列數據以進行時間序列分析。時間導航器允許分析師專注于時間序列的一部分,同時保持數據的整個長期趨勢。在本博客中,我們將構建一個應用程序,用于使用時間導航器組件可視化時間序列。我們將繪制CalIt2 建筑物人數統計數據集,該數據集顯示進出建筑物的人數。數據集將從UCI 機器學習存儲庫中讀取。 
FusionCharts 時間導航器的功能
時間序列和時間導航器組件如下所示。它顯示了從 UCI 的 CalIt2 大樓流出的人員,并具有一些壯觀的時間導航器功能,注釋如下:
 
 
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: '//archive.ics.uci.edu',
            pathRewrite: { '^/UCIAPI': '//archive.ics.uci.edu/ml/machine-learning-databases/event-detection/CalIt2.data'},
            changeOrigin: true,
         },
       },
     }
};
上述配置包括一個代理,用于防止從 UCI 機器學習存儲庫讀取數據時出現 CORS 錯誤。
第 3 步:導入庫、創建數據源、渲染圖表
作為最后一步,將代碼添加到 index.js 文件,執行以下操作:
在 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正版授權,或了解更多產品信息請點擊
 
	
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: