Highcharts+NodeJS搭建数据可视化平台

转载 2017年01月03日 11:47:28


转载自:http://blog.csdn.net/fareise/article/details/53899514


一、数据的读取

       由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可。

       1.数据库基本配置

  为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. var connection = mysql.createConnection({  
  2.   host     : '127.0.0.1',  
  3.   user     : 'root',  
  4.   password : 'root',  
  5.   database : 'Your_Database',  
  6.   port : 3306  
  7. });  
       tips:当我们在本地开发时,可以先将线上数据库中的数据拷贝一部分到本地,如利用php myadmin,然后通过读取本地数据进行开发。

2.数据库连接

我们可以设定,当访问到某个url后,自动建立mysql连接,代码如下:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. router.get('/test'function (req, res, next) {  
  2.   var username = req.cookies.username;  
  3.   if(typeof username === "undefined" || username != "yidianzixun@163.com"){  
  4.     res.redirect('/');  
  5.   }else{  
  6.     if(connection.threadId){  
  7.       return;  
  8.     }else{  
  9.       connection.connect(function(err) {  
  10.         if (err) {  
  11.           console.error('error connecting: ' + err.stack);  
  12.           return;  
  13.         }  
  14.         console.log('connected as id ' + connection.threadId);  
  15.       });  
  16.     }  
  17.   }  
  18. })  
注意这里面的验证。我们这里的项目比较简单,仅使用cookie做身份验证。当我们要建立数据库连接时,首先一定要进行身份验证,否则任何人发送请求就都可以和我们的数据库进行连接了,会造成很严重的安全隐患。

通过调用mysql中的connect方法,进行mysql数据库的连接。这里注意,数据库的连接不能并行,否则会报错。因此为了安全,我们首先必须要先判断一下当前是否已经连接了数据库,这里可以使用connection.threadId判断其是否定义,从而判断其是否已经建立连接。如果已经建立了连接,则不要再次建立连接。
3.执行查询语句

通过调用query()方法,即可处理语句查询操作,输入的内容可以是任何正确的mysql查询语句,也可以嵌套其他变量,最后只要拼接出一个字符串即可。实例如下:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. router.post('/test'function (req, res, next) {  
  2.   var startDate = req.body.startDate;  
  3.   var endDate = req.body.endDate;  
  4.   connection.query('SELECT `date`, COUNT(DISTINCT `idea_id`) AS num,   
  5.     SUM(`view`) AS view, SUM(`click`) AS click,   
  6.     SUM(`cost`) AS cost FROM `idea_report_all`   
  7.     where `date` BETWEEN "' + startDate + '" AND "' + endDate +   
  8.     '" GROUP BY `date` ORDER BY `date` ASC'function(err, rows, fields) {  
  9.     if (err) throw err;  
  10.     var rows = calculate(rows);  
  11.     res.send(JSON.stringify(rows));  
  12.   });  
  13. })  
这里我们根据获取到的开始日期和截止日期,拼接成一个query语句,查询出我们需要的数据,最后可以在回调函数中调用(rows参数),是一个数组。

最后,将这个数据反回给前台即可,前台进行数据的处理和可视化。


二、HighCharts使用

       Highcharts的使用可以在官方API上查看各个方法,而且有在线演示,非常方便(推荐Highcharts中文网)。其中最麻烦的就是要绘制的图表的配置项所需要的各个参数所组成的对象。建议设定一个构造这个对象的构造器,根据传入的各个参数构造出对应需要的HighCharts配置项。因为传入的参数过多,我们要使用对象的形式进行构建。关于HighCharts框架的更多使用,将在以后博客中更新,可以先看一下下面这个构造的例子。

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. function greateOptions (id, text, xAxisTitle, date, yAxisTitle1, yAxisTitle2, k1,unit1, k2,unit2, series, color, tooltip) {  
  2.     var data = new Object();  
  3.     data.chart = {  
  4.         renderTo: id,  
  5.     marginLeft: 50,  
  6.     marginTop: 70  
  7.     };  
  8.   data.colors = color;  
  9.     data.title = {  
  10.         text: text,  
  11.         align: "left"  
  12.     };  
  13.   data.tooltip = {  
  14.     crosshairs: true,  
  15.     shared: true,  
  16.     useHTML: true,  
  17.     style: {  
  18.       padding: 10  
  19.     },  
  20.     headerFormat: '<table><tr><td>' + tooltip + ':</td><td>{point.key}</td></tr>',  
  21.     pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +  
  22.                  '<td style="text-align: left"><b>{point.y}</b></td></tr>',  
  23.     footerFormat: '</table>'  
  24.   };  
  25.   data.noData = {  
  26.     style: {  
  27.       fontWeight: 'bold',  
  28.       fontSize: '15px',  
  29.       color: '#303030'  
  30.     }  
  31.   };  
  32.   data.lang = {  
  33.     noData: "正在为您加载数据......"  
  34.   };  
  35.   data.credits = {  
  36.     enabled: false  
  37.   };  
  38.     data.xAxis = {  
  39.         tickPosition: 'outside',  
  40.     title : {  
  41.         text: xAxisTitle || ''  
  42.     },  
  43.     categories: date  
  44.     };  
  45.     data.yAxis = [{  
  46.         lineWidth: 1,  
  47.         title: {  
  48.             text: yAxisTitle1 || ''  
  49.         },  
  50.         labels: {  
  51.             formatter: function(){  
  52.                 return this.value/k1 + unit1;  
  53.             }  
  54.         }  
  55.     },{  
  56.         lineWidth: 1,  
  57.         opposite: true,  
  58.         title: {  
  59.             text: yAxisTitle2 || ''  
  60.         },  
  61.         labels: {  
  62.             formatter: function(){  
  63.                 return this.value/k2 + unit2;  
  64.             }  
  65.         }  
  66.     }];  
  67.     data.series = series;  
  68.     return data;  
  69. }  

Highcharts+NodeJS搭建数据可视化平台

前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建。下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验。一、数据的读取       由于数据库...
  • fareise
  • fareise
  • 2016年12月27日 22:21
  • 11042

手把手教你Web数据可视化平台搭建

手把手教你Web数据可视化平台搭建
  • fareise
  • fareise
  • 2017年03月07日 18:27
  • 2661

利用django框架,手把手教你搭建数据可视化系统(一)

如何使用django去构建数据可视化的 web,可视化的结果可以呈现在web上。使用django的MTV模型搭建网站基础铺垫—MTV模型Created with Raphaël 2.1.0Reques...
  • jacky_zhuyuanlu
  • jacky_zhuyuanlu
  • 2017年09月26日 13:38
  • 1121

数据可视化平台是什么?

前面说完了大数据开发平台的核心组件,作业调度系统,接下来讨论一下大数据开发平台的脸面之一,数据可视化平台。和调度系统一样,这又是一个很多公司可能想要自己造一个轮子的系统。。。     数据可...
  • mmp591
  • mmp591
  • 2017年08月02日 18:33
  • 536

数据可视化平台理论与实践

前面说完了大数据开发平台的核心组件,作业调度系统,接下来讨论一下大数据开发平台的脸面之一,数据可视化平台。...
  • colorant
  • colorant
  • 2017年08月02日 09:32
  • 4488

中小企业如何搭建数据可视化平台

如今,信息时代正逐步向数据时代转变,数据演变得越来越重要,它可以反映出公司的经营情况,为公司的经营和决策提供准确的参考依据。而数据平台是连接数据和企业的中间件,可以将这些数据通过一定的规格,清晰地展示...
  • nayun123
  • nayun123
  • 2016年10月31日 17:01
  • 1272

企业如何开展数据可视化建设

在市场竞争激烈、变数不定的大环境下,越来越多的企业意识到信息资源的重要性。信息,无论是来自企业内部还是市场外部,都能帮助企业在现有资源上提高运营效率,分析挖掘辅助决策的策略,做出符合行情的战略规划。...
  • yuanziok
  • yuanziok
  • 2016年07月25日 16:57
  • 1394

大数据可视化平台(前后端)

序嗯,这算是研究生入学后接触的第一个项目吧,其实就是一个demo系统吧,用来做数据可视化。 更新至热力图。 系统设计整体框架本系统是采用了三层体系结构进行搭建。作为底层的数据层是由MySQL数据库...
  • xbmail2013
  • xbmail2013
  • 2016年04月19日 00:46
  • 2539

基于flask的数据分析平台

DAP简介DAP(data analysis platform)是一款采用开源软件开发的开源数据分析平台,可供个人学习与企业决策提供参考,本平台易于扩展,可以方便的根据实际的业务进行修改定制,具有一定...
  • he_min
  • he_min
  • 2017年06月09日 15:45
  • 672

数据可视化发挥流程的价值——江汽物流数据监控平台建设经验

一年的时间,江汽物流沉淀出一套流程可视化的经验。这里拿出来一同探讨。...
  • yuanziok
  • yuanziok
  • 2017年03月23日 15:14
  • 3445
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Highcharts+NodeJS搭建数据可视化平台
举报原因:
原因补充:

(最多只允许输入30个字)