Highcharts+NodeJS搭建數(shù)據(jù)可視化平臺示例
前一段時間完成了一個數(shù)據(jù)可視化項目,由后臺NodeJS+Highcharts框架進行搭建。下面分享一下整個開發(fā)過程的流程,以及使用Highcharts框架的經(jīng)驗。
一、數(shù)據(jù)的讀取
由于數(shù)據(jù)庫使用的是MySQL數(shù)據(jù)庫,在NodeJS中,可以使用NodeJS中的mysql模塊進行mysql數(shù)據(jù)庫的相關操作,通過npm安裝即可。
1.數(shù)據(jù)庫基本配置
為了方便,我們最好先進行一個數(shù)據(jù)庫連接的基本配置,mysql模塊需要的配置信息如下:
var connection = mysql.createConnection({ host : '127.0.0.1', user : 'root', password : 'root', database : 'Your_Database', port : 3306 });
tips:當我們在本地開發(fā)時,可以先將線上數(shù)據(jù)庫中的數(shù)據(jù)拷貝一部分到本地,如利用php myadmin,然后通過讀取本地數(shù)據(jù)進行開發(fā)。
2.數(shù)據(jù)庫連接
我們可以設定,當訪問到某個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做身份驗證。當我們要建立數(shù)據(jù)庫連接時,首先一定要進行身份驗證,否則任何人發(fā)送請求就都可以和我們的數(shù)據(jù)庫進行連接了,會造成很嚴重的安全隱患。
通過調(diào)用mysql中的connect方法,進行mysql數(shù)據(jù)庫的連接。這里注意,數(shù)據(jù)庫的連接不能并行,否則會報錯。因此為了安全,我們首先必須要先判斷一下當前是否已經(jīng)連接了數(shù)據(jù)庫,這里可以使用connection.threadId判斷其是否定義,從而判斷其是否已經(jīng)建立連接。如果已經(jīng)建立了連接,則不要再次建立連接。
3.執(zhí)行查詢語句
通過調(diào)用query()方法,即可處理語句查詢操作,輸入的內(nèi)容可以是任何正確的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)); }); })
這里我們根據(jù)獲取到的開始日期和截止日期,拼接成一個query語句,查詢出我們需要的數(shù)據(jù),最后可以在回調(diào)函數(shù)中調(diào)用(rows參數(shù)),是一個數(shù)組。
最后,將這個數(shù)據(jù)反回給前臺即可,前臺進行數(shù)據(jù)的處理和可視化。
二、HighCharts使用
Highcharts的使用可以在官方API上查看各個方法,而且有在線演示,非常方便(推薦Highcharts中文網(wǎng))。其中最麻煩的就是要繪制的圖表的配置項所需要的各個參數(shù)所組成的對象。建議設定一個構造這個對象的構造器,根據(jù)傳入的各個參數(shù)構造出對應需要的HighCharts配置項。因為傳入的參數(shù)過多,我們要使用對象的形式進行構建。關于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: "正在為您加載數(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
npm?install安裝失敗報錯:The?operation?was?rejected?by?your?
這篇文章主要給大家介紹了關于npm?install安裝失敗報錯:The?operation?was?rejected?by?your?operating?system的相關資料,文中給出了多種解決方法供大家參考學習,需要的朋友可以參考下2023-04-04