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
  • 10676

jQuery+AJAX+JSON+Highcharts 可视化数据实战——实时的温度曲线实战

因为项目需要打算把原来做的比赛的东西,迁移到Angular JS上面,但是发现要熟悉使用起来还需要一段时间,旧的框架就是现有的jQuery+JSON+Highcharts+AJAX。 数据格式如下所示...
  • gmszone
  • gmszone
  • 2013年11月10日 17:00
  • 13317

前端数据可视化插件:Highcharts、Echarts和D3

前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/)、Echarts(http://echarts.baidu.com/)和D3(https:...

关于数据可视化Chartjs,Highcharts用法

数据可视化,chartjs,js图形,svg,canvas,Highcharts

数据可视化图表插件--HighCharts

使用步骤: 1.引入JQuery和HighCharts库 2.div设置id用于包含 Highcharts 绘制的图表 3.使用json数据格式来配置图表 4.动态数据与服务端交互 Demo示例: ...

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,...

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

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

公安大数据可视化指挥决策平台

数字冰雹的公安大数据可视化指挥决策平台,是一个面向公安机关管理部门的综合性决策支撑平台。平台具有开放体系结构,集成监测预警、应急指挥调度、仿真推演、分析研判等于一身,支持从警力警情分布、视频监控、卡口...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Highcharts+NodeJS搭建数据可视化平台
举报原因:
原因补充:

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