翻譯|使用教程|編輯:楊鵬連|2021-07-29 09:36:37.920|閱讀 245 次
概述:時(shí)間序列分析和可視化在企業(yè)和商業(yè)世界中發(fā)揮著關(guān)鍵作用。時(shí)間序列描繪了隨時(shí)間變化或波動(dòng)的變量,因此它是預(yù)測(cè)利潤(rùn)、預(yù)測(cè)、營(yíng)銷等不可或缺的工具。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
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圖表。
時(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ù)據(jù)是逗號(hào)分隔的表格。第一列是流出 7 和流入 9。我們將只繪制流出。第二列和第三列是日期和時(shí)間。最后一列是人數(shù)。
使用時(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在項(xiàng)目目錄下創(chuàng)建dist和src子目錄。此外,創(chuàng)建一個(gè)空文件 index.js,其中將包含項(xiàng)目的源代碼。在控制臺(tái)中,鍵入以下內(nèi)容:
mkdir src touch src/index.js mkdir dist第 2 步:項(xiàng)目配置
要配置項(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, }, }, } };上述配置包括一個(gè)代理,用于防止從 UCI 機(jī)器學(xué)習(xí)存儲(chǔ)庫(kù)讀取數(shù)據(jù)時(shí)出現(xiàn) CORS 錯(cuò)誤。
第 3 步:導(dǎo)入庫(kù)、創(chuàng)建數(shù)據(jù)源、渲染圖表
作為最后一步,將代碼添加到 index.js 文件,執(zhí)行以下操作:
在 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)用程序
要運(yùn)行該應(yīng)用程序,請(qǐng)?jiān)诳刂婆_(tái)中鍵入以下內(nèi)容:npx webpack serve --mode=development
您可以通過導(dǎo)航到 localhost:8080 在瀏覽器中查看該應(yīng)用程序
有更多方法可以可視化時(shí)間序列數(shù)據(jù)嗎?
如果您正在尋找快速簡(jiǎn)便的方法在您的應(yīng)用程序中添加漂亮的圖表和繪圖,F(xiàn)usionCharts 就是您的最佳選擇。FusionCharts 包括 100 多個(gè)圖表和 2000 多個(gè)交互式地圖。FusionTime 模塊可讓您創(chuàng)建從基本到更復(fù)雜的具有數(shù)百萬個(gè)數(shù)據(jù)點(diǎn)的多元序列的時(shí)間序列。FusionTime 包括開箱即用的交互性,如時(shí)間導(dǎo)航器、日期范圍選擇器、交互式圖例等等。最好的部分是在 Javascript 中創(chuàng)建時(shí)間序列只需要幾行代碼。想要購(gòu)買FusionCharts Suite XT正版授權(quán),或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: