Highcharts+NodeJS搭建数据可视化平台示例
前一段时间完成了一个数据可视化项目,由后台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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 你咋知道的
推荐阅读
-
Highcharts+NodeJS搭建数据可视化平台示例
-
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
-
docker环境搭建JMeter+Grafana+influxdb可视化性能监控平台的教程
-
Python数据可视化编程通过Matplotlib创建散点图代码示例
-
互联网公司掘金大数据 搜狐搭建基于云计算平台
-
从零搭建企业大数据分析和机器学习平台-技术栈介绍(三)
-
从零开始搭建量化投资分析平台之一——从搭建量化投资数据库开始(1)
-
荐 Python 框架 之 Django 的数据后台管理平台,简单的搭建、以及数据基本操作
-
【若泽大数据实战第一天】大数据测试平台搭建
-
知名大厂如何搭建大数据平台&架构