女儿国3在线观看免费版高清,日本中文字幕乱码在线精品,国产精品白丝网站

【Highcharts教程】使用NodeJS和Highcharts可視化維基百科數據

翻譯|使用教程|編輯：王香|2018-12-27 10:26:06.000|閱讀 559 次

概述：在本教程中，將向您展示如何使用Wikipedia API，NodeJS和Highcharts提取和可視化Pageviews Analysis數據。

相關鏈接：

HighChart

維基百科是信息和數據的重要來源; 每秒超過10次編輯。在英文維基百科單獨獲得每天600頁新的文章。但維基百科還提供了許多用于瀏覽網頁統計數據的工具，例如網頁瀏覽分析，維基百科排名，維基百科API等。如果你像我一樣熱衷于DataViz，這是一個寶庫數據！

在本教程中，將向您展示如何使用Wikipedia API，NodeJS和Highcharts提取和可視化Pageviews Analysis數據。 MediaWiki提供了一個非常簡單的維基百科API，不需要API密鑰。 2017年7月1日至6月3日提取維基百科網頁國際空間站的日期和用戶視圖，然后在交互式圖表中繪制趨勢圖（請參閱下面的GIF）：

HighChart

備注您可以從以下Github鏈接下載本文中使用的代碼。我使用以下Wikipedia API結構：https：//wikimedia.org/api/rest_v1/metrics/pageviews/per-article/en.wikipedia/all-access/user/International_Space_Station/daily/2017070100/2018060300。請注意在第10個字段中使用頁面名稱，在第12個字段中使用日期。

要處理API調用，我使用request-promise包。首先，讓我們創建一個文件夾來保存代碼。瀏覽到您創建的文件夾并安裝request-promise包：

npm install --save request
npm install --save request-promise

HighChart

當我使用highcharts庫時，我需要使用此命令行安裝它：

npm install highcharts

HighChart

要安裝的最后一個包是browserify。

npm install browserify

HighChart

Browserify允許我將整個代碼（包括Highcharts庫）編譯成單個js文件，我可以將其作為腳本包含在HTML網頁中。我將首先顯示代碼（您可以復制并粘貼），運行它; 然后我會為你審查代碼。

代碼

創建一個新的js文件（例如：code.js），并復制/粘貼下面的代碼：

var rp = require('request-promise');
var Highcharts = require('highcharts');

var options = {
  method: 'GET',
  uri: '//wikimedia.org/api/rest_v1/metrics/pageviews/per-article/en.wikipedia/all-access/user/International_Space_Station/daily/2017070100/2018060300',
  json: true,
};

rp(options)
  .then((parseBody) => {
    var arrData = [];
    var year, month, day;

    for (i = 0; i < parseBody.items.length; i++) {
      year = parseBody.items[i].timestamp.slice(0, 4);
      month = parseBody.items[i].timestamp.slice(4, 6);
      day = parseBody.items[i].timestamp.slice(6, 8);
      arrData.push([new Date(year + '-' + month + '-' + day).toDateString(), parseBody.items[i].views]);
    }

    year = parseBody.items[0].timestamp.slice(0, 4);
    month = parseBody.items[0].timestamp.slice(4, 6);
    day = parseBody.items[0].timestamp.slice(6, 8);

    // Create the chart    
    Highcharts.chart('container', {
      title: {
        text: 'Views of the International Space Station Wikipedia webpage'
      },
      subtitle: {
        useHTML: true,
        text: 'Source: Wikipedia'
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          day: '%y/%b/%e'
        }
      },
      yAxis: {
        title: {
          text: 'Number of views'
        }
      },
      series: [{
        name: 'views',
        data: arrData,
        pointStart: Date.UTC(year, month, day),
        pointInterval: 24 * 3600 * 1000 // one day
      }]
    });
  });

創建一個HTML文件（例如：chart.html），然后復制/粘貼下面的代碼：

<html>	
    <head>>	
        <script src="bundle.js"></script>	 
    </head>	
    <body>	
        <div id="container"></div>       
    </body>	
</html>

運行代碼

要運行代碼，只需在終端上執行此命令行，然后單擊HTML文件以查看結果。browserify code.js > bundle.js

說明

創建了Options對象，其中包含發出請求所需的所有信息。此路由不需要任何身份驗證，因此它應該非常簡單。

var options = { 
  method：'GET'，
  uri：'//wikimedia.org/api/rest_v1/metrics/pageviews/per-article/en.wikipedia/all-access/user/International_Space_Station/daily/2017070100/2018060300 '，
  json：true，
};

該對象包括：

請求的方法/類型（GET，POST，PUT，DELETE）。在這種情況下，我使用GET，因為我從維基百科請求數據。
指向uri表示的URL的鏈接。
來自URL的預期數據類型。在這種情況下JSON。

以下代碼啟動整個提取數據過程：

rp(options)
  .then((parseBody) => {
….
});

parseBody，保存從維基百科中獲取的數據：

...{"project":"en.wikipedia","article":"International_Space_Station","granularity":"daily","timestamp":"2018021700","access":"all-access","agent":"user","views":4549},{"project":"en.wikipedia","article":"International_Space_Station","granularity":"daily","timestamp":"2018021800","access":"all-access","agent":"user","views":4896},{"project":"en.wikipedia","article":"International_Space_Station","granularity":"daily","timestamp":"2018021900","access":"all-access","agent":"user","views":4634},{"project":"en.wikipedia","article":"International_Space_Station","granularity":"daily","timestamp":"2018022000","access":"all-access","agent":"user","views":4701} ...,

該內容parseBody有很多信息，但我只對觀看次數和日期感興趣。要提取這些數據，我使用以下循環：

for (i = 0; i < parseBody.items.length; i++) {
      year = parseBody.items[i].timestamp.slice(0, 4);
      month = parseBody.items[i].timestamp.slice(4, 6);
      day = parseBody.items[i].timestamp.slice(6, 8);

      arrData.push([new Date(year + '-' + month + '-' + day).toDateString(), parseBody.items[i].views]);
    }

請注意，我使用三個變量來處理日期：年，月和日。這是因為維基百科中的日期結構為YYYYMMDD。我更喜歡Unix時間戳，因為它更容易管理。哦，好吧...... 一旦提取了所有這些數據，我就使用Highcharts構建圖表：

Highcharts.chart('container', {
      title: {
        text: 'Views of the International Space Station (Wikipedia webpage)'
      },
      subtitle: {
        useHTML: true,
        text: 'Source: Wikipedia'
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          day: '%y/%b/%e'
        }
      },
      yAxis: {
        title: {
          text: 'Number of views'
        }
      },
      series: [{
        name: 'views',
        data: arrData,
        pointStart: Date.UTC(year, month, day),
        pointInterval: 24 * 3600 * 1000 // one day
      }]
    });

這就是你如何使用NodeJS和Highcharts可視化維基百科網頁瀏覽分析。

購買TeeChart Pro AciveX正版授權，請點擊“”喲！

標簽：圖表圖表控件 highcharts

本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：如何在Barcode Reader Toolkit設置LoadXMLSettings和屬性設置功能下一篇：【Stimulsoft Reports Flex教程】代碼打印報表