前一段時(shí)間完成了一個(gè)數(shù)據(jù)可視化項(xiàng)目，由后臺(tái)NodeJS＋Highcharts框架進(jìn)行搭建。下面分享一下整個(gè)開發(fā)過程的流程，以及使用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)操作，通過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è)诒镜亻_發(fā)時(shí)，可以先將線上數(shù)據(jù)庫(kù)中的數(shù)據(jù)拷貝一部分到本地，如利用php myadmin，然后通過讀取本地?cái)?shù)據(jù)進(jìn)行開發(fā)。
2.數(shù)據(jù)庫(kù)連接
我們可以設(shè)定，當(dāng)訪問到某個(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)重的安全隱患。
通過調(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ǔ)句
通過調(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ù)獲取到的開始日期和截止日期，拼接成一個(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ù)過多，我們要使用對(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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
