Highcharts+NodeJS搭建數(shù)據(jù)可視化平臺示例
前一段時(shí)間完成了一個(gè)數(shù)據(jù)可視化項(xiàng)目,由后臺NodeJS+Highcharts框架進(jìn)行搭建。下面分享一下整個(gè)開發(fā)過程的流程,以及使用Highcharts框架的經(jīng)驗(yàn)。
一、數(shù)據(jù)的讀取
由于數(shù)據(jù)庫使用的是MySQL數(shù)據(jù)庫,在NodeJS中,可以使用NodeJS中的mysql模塊進(jìn)行mysql數(shù)據(jù)庫的相關(guān)操作,通過npm安裝即可。
1.數(shù)據(jù)庫基本配置
為了方便,我們最好先進(jìn)行一個(gè)數(shù)據(jù)庫連接的基本配置,mysql模塊需要的配置信息如下:
var connection = mysql.createConnection({ host : '127.0.0.1', user : 'root', password : 'root', database : 'Your_Database', port : 3306 });
tips:當(dāng)我們在本地開發(fā)時(shí),可以先將線上數(shù)據(jù)庫中的數(shù)據(jù)拷貝一部分到本地,如利用php myadmin,然后通過讀取本地?cái)?shù)據(jù)進(jìn)行開發(fā)。
2.數(shù)據(jù)庫連接
我們可以設(shè)定,當(dāng)訪問到某個(gè)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); }); } } })
注意這里面的驗(yàn)證。我們這里的項(xiàng)目比較簡單,僅使用cookie做身份驗(yàn)證。當(dāng)我們要建立數(shù)據(jù)庫連接時(shí),首先一定要進(jìn)行身份驗(yàn)證,否則任何人發(fā)送請求就都可以和我們的數(shù)據(jù)庫進(jìn)行連接了,會造成很嚴(yán)重的安全隱患。
通過調(diào)用mysql中的connect方法,進(jìn)行mysql數(shù)據(jù)庫的連接。這里注意,數(shù)據(jù)庫的連接不能并行,否則會報(bào)錯(cuò)。因此為了安全,我們首先必須要先判斷一下當(dāng)前是否已經(jīng)連接了數(shù)據(jù)庫,這里可以使用connection.threadId判斷其是否定義,從而判斷其是否已經(jīng)建立連接。如果已經(jīng)建立了連接,則不要再次建立連接。
3.執(zhí)行查詢語句
通過調(diào)用query()方法,即可處理語句查詢操作,輸入的內(nèi)容可以是任何正確的mysql查詢語句,也可以嵌套其他變量,最后只要拼接出一個(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語句,查詢出我們需要的數(shù)據(jù),最后可以在回調(diào)函數(shù)中調(diào)用(rows參數(shù)),是一個(gè)數(shù)組。
最后,將這個(gè)數(shù)據(jù)反回給前臺即可,前臺進(jìn)行數(shù)據(jù)的處理和可視化。
二、HighCharts使用
Highcharts的使用可以在官方API上查看各個(gè)方法,而且有在線演示,非常方便(推薦Highcharts中文網(wǎng))。其中最麻煩的就是要繪制的圖表的配置項(xiàng)所需要的各個(gè)參數(shù)所組成的對象。建議設(shè)定一個(gè)構(gòu)造這個(gè)對象的構(gòu)造器,根據(jù)傳入的各個(gè)參數(shù)構(gòu)造出對應(yīng)需要的HighCharts配置項(xiàng)。因?yàn)閭魅氲膮?shù)過多,我們要使用對象的形式進(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; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Node.js斷點(diǎn)續(xù)傳的實(shí)現(xiàn)
最近做了個(gè)項(xiàng)目,應(yīng)項(xiàng)目需求,需要傳圖片、Excel等,幾M的大小可以很快就上傳到服務(wù)器,但是大的就需要斷點(diǎn)上傳,本文就介紹一下,感興趣的可以了解一下2021-05-05node文件資源管理器讀取視頻信息從零實(shí)現(xiàn)
這篇文章主要為大家介紹了node文件資源管理器讀取視頻信息從零實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12Mongoose實(shí)現(xiàn)虛擬字段查詢的方法詳解
這篇文章主要給大家介紹了關(guān)于Mongoose實(shí)現(xiàn)虛擬字段查詢的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08npm?install安裝失敗報(bào)錯(cuò):The?operation?was?rejected?by?your?
這篇文章主要給大家介紹了關(guān)于npm?install安裝失敗報(bào)錯(cuò):The?operation?was?rejected?by?your?operating?system的相關(guān)資料,文中給出了多種解決方法供大家參考學(xué)習(xí),需要的朋友可以參考下2023-04-04