加密貨幣的繁榮勢(shì)頭越來(lái)越強(qiáng)勁，世界各地的許多企業(yè)都在跟風(fēng)，開始交易和跟蹤加密貨幣。 即使是那些希望避免在這個(gè)動(dòng)蕩的市場(chǎng)中交易的公司也意識(shí)到，為了保持競(jìng)爭(zhēng)力，他們需要對(duì)使用數(shù)字貨幣進(jìn)行付款和收款的想法持開放態(tài)度。  

出于這些原因，隨著數(shù)字貨幣在國(guó)際上的日益流行，越來(lái)越多的人發(fā)現(xiàn)有必要監(jiān)控區(qū)塊鏈和加密貨幣相關(guān)的數(shù)據(jù)并繪制圖表。  

如果您是比特幣愛好者并且對(duì)繪制區(qū)塊鏈數(shù)據(jù)感興趣，F(xiàn)usionCharts 是您的正確選擇。FusionCharts 是一個(gè)綜合平臺(tái)，用于創(chuàng)建令人驚嘆且美觀的圖表、圖形和地圖，可以輕松集成到您的應(yīng)用程序中。

繼續(xù)閱讀以了解如何在 Javascript 客戶端中使用 FusionCharts繪制區(qū)塊鏈數(shù)據(jù)。開始吧，我們將繪制每秒添加到內(nèi)存池的比特幣交易數(shù)量。

什么是 BlockChain.com API？

如果您正在尋找加密 API，BlockChain.com 為其圖表和統(tǒng)計(jì)數(shù)據(jù)提供 JSON 提要。例如，一個(gè)基本的區(qū)塊鏈查詢?nèi)缦滤荆?/span>

 

該查詢返回一個(gè)JSON對(duì)象的結(jié)果，該結(jié)果具有以下結(jié)構(gòu)。 請(qǐng)注意，為了便于閱讀，下面只顯示了前兩個(gè)數(shù)據(jù)點(diǎn)。  

 

數(shù)據(jù)以 (x,y) 對(duì)的形式出現(xiàn)在“values”鍵中。

FusionCharts 區(qū)塊鏈數(shù)據(jù)圖是什么樣的？

如果您想知道在選擇 FusionCharts 圖表時(shí)會(huì)發(fā)生什么，這里是一個(gè)示例。在本例中，我們創(chuàng)建了每秒添加到內(nèi)存池的比特幣交易數(shù)量的散點(diǎn)圖。它看起來(lái)像這樣：

 

上圖有幾個(gè)吸引人的特點(diǎn)。這些特點(diǎn)包括：

1.FusionCharts 自動(dòng)繪制回歸線，顯示為藍(lán)色實(shí)線，以顯示長(zhǎng)期數(shù)據(jù)。它還計(jì)算線性回歸模型。

2.您可以自定義散點(diǎn)圖顏色和符號(hào)。

3.用戶指定 x 軸刻度和刻度標(biāo)簽。

4.用戶可以 100% 控制自定義圖表中所有內(nèi)容的外觀和行為。這包括標(biāo)題、副標(biāo)題、軸標(biāo)簽和其他所有內(nèi)容。

創(chuàng)建 FusionCharts 區(qū)塊鏈數(shù)據(jù)圖的步驟是什么？

使用 FusionCharts 創(chuàng)建區(qū)塊鏈數(shù)據(jù)圖很容易。以下是您開始所需的 4 個(gè)簡(jiǎn)單步驟：

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

首先，我們將使用 webpack 在 Javascript 中實(shí)現(xiàn)該項(xiàng)目。首先，創(chuàng)建一個(gè)名為 blockchainAPI 的項(xiàng)目目錄。打開命令提示符并切換到項(xiàng)目目錄。接下來(lái)輸入以下內(nèi)容來(lái)安裝 webpack 和 FusionCharts：

 

創(chuàng)建兩個(gè)目錄 src 和 dist。在 src 目錄中創(chuàng)建一個(gè)名為 index.js 的文件。您可以在命令提示符下鍵入以下內(nèi)容：

 

步驟 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: {

         '/BlockchainAPI': {

            target: 'https://api.blockchain.info',

            pathRewrite: { '^/BlockchainAPI': 'https://api.blockchain.info/charts/transactions-per-second?timespan=1weeks&format=json'},

            changeOrigin: true,

         },

       },

 

     }

};

 

在上面顯示的配置文件中，我們?yōu)?blockchain.info URL 添加了一個(gè)代理，以避免任何 CORS 錯(cuò)誤。

第 3 步：導(dǎo)入 FusionCharts 庫(kù)

要導(dǎo)入FusionCharts庫(kù)，首先打開index.js文件，并添加以下代碼。 這將導(dǎo)入項(xiàng)目中所有的FusionCharts庫(kù)。  

 

您還需要在主HTML頁(yè)面上為圖表容器創(chuàng)建一個(gè)div標(biāo)記。 在import部分下面，將以下內(nèi)容添加到index.js文件中:  

 

步驟4:導(dǎo)入數(shù)據(jù)并創(chuàng)建圖形  

第四步也是最后一步是導(dǎo)入?yún)^(qū)塊鏈數(shù)據(jù)并為我們的圖表創(chuàng)建一個(gè)JSON對(duì)象。 “DataSource”鍵包含一個(gè)名為“data”的嵌套鍵，它包含我們想要繪制的實(shí)際(x,y)點(diǎn)。 在index.js文件的末尾，添加以下代碼:  

async function main() {

    //Get the data

    let response = await fetch('/BlockchainAPI');

    let data = await response.json();

    if (response.ok){        

        renderPage(data);

    }

    else {

        alert('Error reading data from Blockchain Repository');

    }

}

 

//renders the html page when passed data as JSON text

function renderPage(JsonText){

 

    var dataSource = constructDataSource(JsonText);

    renderChart(dataSource);

}

 

//constructs JSON text for 'dataSource' key

function constructDataSource(blockchainJson){

 

    var dataset = [{

        "seriesname": "Bitcoin transactions",

        anchorbgcolor: "ff00ff",

        data: blockchainJson.values

    }];

    var category = []

    // Take around 5 transactions at equidistant points

    var len = blockchainJson.values.length;

    for (var i=0;i<len;i=i+Math.trunc(len/5)){

        category.push({x: blockchainJson.values[i].x,

                       label: blockchainJson.values[i].x.toString(),

                       showverticalline: "1"

                       });

    } //end for

 

    var categories = [

    {

      verticallinedashed: "1",

      verticallinedashlen: "1",

      verticallinedashgap: "1",

      verticallinethickness: "1",

      verticallinecolor: "#000000",

      category

    }

  ];

 

  var dataSource = {"chart": {

        "caption": blockchainJson.description,

        "subcaption": "Data Source: https://www.blockchain.com",

        "xAxisName": "Time stamp",

        "YAxisName": blockchainJson.unit,

        "ynumbersuffix": "",

        "xnumbersuffix": "",

        "theme": "fusion",

        "showRegressionLine": "1",

        "plotToolText": "<b>$yDataValue</b> transactions at timestamp: <b>$xvalue</b>"

 

    },

    dataset, categories};    

    return dataSource;

}

 

// Draw the chart

function renderChart(dataSrc){

 

    FusionCharts.addDep(Scatter);

    FusionCharts.addDep(FusionTheme);

    //Chart Configurations

    const chartConfig = {

        type: 'scatter',

        renderAt: 'chart-container',

        width: '80%',

        height: '600',

        dataFormat: 'json',

        dataSource: dataSrc

    }

 

    //Create an Instance with chart options and render the chart

    var chartInstance = new FusionCharts(chartConfig);

    chartInstance.render();

}

 

//Call main method

main();

 

就是這樣! 我們只是使用FusionCharts散點(diǎn)圖創(chuàng)建了一個(gè)漂亮的區(qū)塊鏈數(shù)據(jù)可視化。  

還有其他方法來(lái)實(shí)現(xiàn)有效的區(qū)塊鏈數(shù)據(jù)可視化?  

如果您正在尋找創(chuàng)建區(qū)塊鏈數(shù)據(jù)可視化的最快速和最有效的方法，那么您不需要再繼續(xù)尋找。 這是因?yàn)镕usionCharts提供了一個(gè)完整的圖、圖表、地圖和曲線圖庫(kù)。 總共有100多個(gè)圖表和2000多個(gè)交互式地圖，您可以輕松地將其集成到您的下一個(gè)應(yīng)用程序。您還可以構(gòu)建令人印象深刻和有效的儀表盤，令人驚嘆的交互式圖表，還可以使用FusionCharts強(qiáng)大的插圖功能。  

 

 將您的數(shù)據(jù)可視化提升到一個(gè)全新的水平

從列到圓環(huán)，從雷達(dá)圖到甘特圖，F(xiàn)usionCharts提供超過(guò)100多個(gè)交互式圖表和2000多個(gè)數(shù)據(jù)驅(qū)動(dòng)的地圖，使您的儀表盤和報(bào)告更有見地