快捷導(dǎo)航

Highcharts＋NodeJS搭建數(shù)據(jù)可視化平臺(tái)示例

更新時(shí)間：2017年01月01日 09:19:47 作者：fareise

本篇文章主要介紹了Highcharts＋NodeJS搭建數(shù)據(jù)可視化平臺(tái)，詳細(xì)的介紹了使用Highcharts框架的經(jīng)驗(yàn)，有興趣的可以了解一下。

前一段時(shí)間完成了一個(gè)數(shù)據(jù)可視化項(xiàng)目，由后臺(tái)NodeJS＋Highcharts框架進(jìn)行搭建。下面分享一下整個(gè)開(kāi)發(fā)過(guò)程的流程，以及使用Highcharts框架的經(jīng)驗(yàn)。

一、數(shù)據(jù)的讀取

由于數(shù)據(jù)庫(kù)使用的是MySQL數(shù)據(jù)庫(kù)，在NodeJS中，可以使用NodeJS中的mysql模塊進(jìn)行mysql數(shù)據(jù)庫(kù)的相關(guān)操作，通過(guò)npm安裝即可。

1.數(shù)據(jù)庫(kù)基本配置

為了方便，我們最好先進(jìn)行一個(gè)數(shù)據(jù)庫(kù)連接的基本配置，mysql模塊需要的配置信息如下：

var connection = mysql.createConnection({ 
 host   : '127.0.0.1', 
 user   : 'root', 
 password : 'root', 
 database : 'Your_Database', 
 port : 3306 
});

tips：當(dāng)我們?cè)诒镜亻_(kāi)發(fā)時(shí)，可以先將線上數(shù)據(jù)庫(kù)中的數(shù)據(jù)拷貝一部分到本地，如利用php myadmin，然后通過(guò)讀取本地?cái)?shù)據(jù)進(jìn)行開(kāi)發(fā)。

2.數(shù)據(jù)庫(kù)連接

我們可以設(shè)定，當(dāng)訪問(wèn)到某個(gè)url后，自動(dòng)建立mysql連接，代碼如下：

router.get('/test', function (req, res, next) { 
 var username = req.cookies.username; 
 if(typeof username === "undefined" || username != "yidianzixun@163.com"){ 
  res.redirect('/'); 
 }else{ 
  if(connection.threadId){ 
   return; 
  }else{ 
   connection.connect(function(err) { 
    if (err) { 
     console.error('error connecting: ' + err.stack); 
     return; 
    } 
    console.log('connected as id ' + connection.threadId); 
   }); 
  } 
 } 
})

注意這里面的驗(yàn)證。我們這里的項(xiàng)目比較簡(jiǎn)單，僅使用cookie做身份驗(yàn)證。當(dāng)我們要建立數(shù)據(jù)庫(kù)連接時(shí)，首先一定要進(jìn)行身份驗(yàn)證，否則任何人發(fā)送請(qǐng)求就都可以和我們的數(shù)據(jù)庫(kù)進(jìn)行連接了，會(huì)造成很嚴(yán)重的安全隱患。

通過(guò)調(diào)用mysql中的connect方法，進(jìn)行mysql數(shù)據(jù)庫(kù)的連接。這里注意，數(shù)據(jù)庫(kù)的連接不能并行，否則會(huì)報(bào)錯(cuò)。因此為了安全，我們首先必須要先判斷一下當(dāng)前是否已經(jīng)連接了數(shù)據(jù)庫(kù)，這里可以使用connection.threadId判斷其是否定義，從而判斷其是否已經(jīng)建立連接。如果已經(jīng)建立了連接，則不要再次建立連接。

3.執(zhí)行查詢語(yǔ)句

通過(guò)調(diào)用query()方法，即可處理語(yǔ)句查詢操作，輸入的內(nèi)容可以是任何正確的mysql查詢語(yǔ)句，也可以嵌套其他變量，最后只要拼接出一個(gè)字符串即可。實(shí)例如下：

router.post('/test', function (req, res, next) { 
 var startDate = req.body.startDate; 
 var endDate = req.body.endDate; 
 connection.query('SELECT `date`, COUNT(DISTINCT `idea_id`) AS num,  
  SUM(`view`) AS view, SUM(`click`) AS click,  
  SUM(`cost`) AS cost FROM `idea_report_all`  
  where `date` BETWEEN "' + startDate + '" AND "' + endDate +  
  '" GROUP BY `date` ORDER BY `date` ASC', function(err, rows, fields) { 
  if (err) throw err; 
  var rows = calculate(rows); 
  res.send(JSON.stringify(rows)); 
 }); 
})

這里我們根據(jù)獲取到的開(kāi)始日期和截止日期，拼接成一個(gè)query語(yǔ)句，查詢出我們需要的數(shù)據(jù)，最后可以在回調(diào)函數(shù)中調(diào)用（rows參數(shù)），是一個(gè)數(shù)組。

最后，將這個(gè)數(shù)據(jù)反回給前臺(tái)即可，前臺(tái)進(jìn)行數(shù)據(jù)的處理和可視化。

二、HighCharts使用

Highcharts的使用可以在官方API上查看各個(gè)方法，而且有在線演示，非常方便（推薦Highcharts中文網(wǎng)）。其中最麻煩的就是要繪制的圖表的配置項(xiàng)所需要的各個(gè)參數(shù)所組成的對(duì)象。建議設(shè)定一個(gè)構(gòu)造這個(gè)對(duì)象的構(gòu)造器，根據(jù)傳入的各個(gè)參數(shù)構(gòu)造出對(duì)應(yīng)需要的HighCharts配置項(xiàng)。因?yàn)閭魅氲膮?shù)過(guò)多，我們要使用對(duì)象的形式進(jìn)行構(gòu)建。關(guān)于HighCharts框架的更多使用，將在以后博客中更新，可以先看一下下面這個(gè)構(gòu)造的例子。

function greateOptions (id, text, xAxisTitle, date, yAxisTitle1, yAxisTitle2, k1,unit1, k2,unit2, series, color, tooltip) { 
  var data = new Object(); 
  data.chart = { 
    renderTo: id, 
  marginLeft: 50, 
  marginTop: 70 
  }; 
 data.colors = color; 
  data.title = { 
    text: text, 
    align: "left" 
  }; 
 data.tooltip = { 
  crosshairs: true, 
  shared: true, 
  useHTML: true, 
  style: { 
   padding: 10 
  }, 
  headerFormat: '<table><tr><td>' + tooltip + '：</td><td>{point.key}</td></tr>', 
  pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + 
         '<td style="text-align: left"><b>{point.y}</b></td></tr>', 
  footerFormat: '</table>' 
 }; 
 data.noData = { 
  style: { 
   fontWeight: 'bold', 
   fontSize: '15px', 
   color: '#303030' 
  } 
 }; 
 data.lang = { 
  noData: "正在為您加載數(shù)據(jù)......" 
 }; 
 data.credits = { 
  enabled: false 
 }; 
  data.xAxis = { 
    tickPosition: 'outside', 
  title : { 
    text: xAxisTitle || '' 
  }, 
  categories: date 
  }; 
  data.yAxis = [{ 
    lineWidth: 1, 
    title: { 
      text: yAxisTitle1 || '' 
    }, 
    labels: { 
      formatter: function(){ 
        return this.value/k1 + unit1; 
      } 
    } 
  },{ 
    lineWidth: 1, 
    opposite: true, 
    title: { 
      text: yAxisTitle2 || '' 
    }, 
    labels: { 
      formatter: function(){ 
        return this.value/k2 + unit2; 
      } 
    } 
  }]; 
  data.series = series; 
  return data; 
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: