前一段時間完成了一個數據可視化項目，由后臺NodeJS＋Highcharts框架進行搭建。下面分享一下整個開發過程的流程，以及使用Highcharts框架的經驗。
一、數據的讀取
由于數據庫使用的是MySQL數據庫，在NodeJS中，可以使用NodeJS中的mysql模塊進行mysql數據庫的相關操作，通過npm安裝即可。
1.數據庫基本配置
為了方便，我們最好先進行一個數據庫連接的基本配置，mysql模塊需要的配置信息如下：
var connection = mysql.createConnection({ host : '127.0.0.1', user : 'root', password : 'root', database : 'Your_Database', port : 3306 }); tips：當我們在本地開發時，可以先將線上數據庫中的數據拷貝一部分到本地，如利用php myadmin，然后通過讀取本地數據進行開發。
2.數據庫連接
我們可以設定，當訪問到某個url后，自動建立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); }); } } }) 注意這里面的驗證。我們這里的項目比較簡單，僅使用cookie做身份驗證。當我們要建立數據庫連接時，首先一定要進行身份驗證，否則任何人發送請求就都可以和我們的數據庫進行連接了，會造成很嚴重的安全隱患。
通過調用mysql中的connect方法，進行mysql數據庫的連接。這里注意，數據庫的連接不能并行，否則會報錯。因此為了安全，我們首先必須要先判斷一下當前是否已經連接了數據庫，這里可以使用connection.threadId判斷其是否定義，從而判斷其是否已經建立連接。如果已經建立了連接，則不要再次建立連接。
3.執行查詢語句
通過調用query()方法，即可處理語句查詢操作，輸入的內容可以是任何正確的mysql查詢語句，也可以嵌套其他變量，最后只要拼接出一個字符串即可。實例如下：
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)); }); }) 這里我們根據獲取到的開始日期和截止日期，拼接成一個query語句，查詢出我們需要的數據，最后可以在回調函數中調用（rows參數），是一個數組。
最后，將這個數據反回給前臺即可，前臺進行數據的處理和可視化。
二、HighCharts使用
Highcharts的使用可以在官方API上查看各個方法，而且有在線演示，非常方便（推薦Highcharts中文網）。其中最麻煩的就是要繪制的圖表的配置項所需要的各個參數所組成的對象。建議設定一個構造這個對象的構造器，根據傳入的各個參數構造出對應需要的HighCharts配置項。因為傳入的參數過多，我們要使用對象的形式進行構建。關于HighCharts框架的更多使用，將在以后博客中更新，可以先看一下下面這個構造的例子。
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: "正在為您加載數據......" }; 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; } 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
