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


Posted in NodeJs onJanuary 01, 2017

前一段时间完成了一个数据可视化项目,由后台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; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs如何搭建Web服务器
Mar 28 NodeJs
NodeJS创建基础应用并应用模板引擎
Apr 12 NodeJs
Nodejs Stream 数据流使用手册
Apr 17 NodeJs
nodejs获取微信小程序带参数二维码实现代码
Apr 12 NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
Jul 14 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
nodejs中Express与Koa2对比分析
Feb 06 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 NodeJs
nodejs基础之buffer缓冲区用法分析
Dec 26 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 NodeJs
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
Dec 14 NodeJs
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
Dec 30 #NodeJs
浅谈Nodejs中的作用域问题
Dec 26 #NodeJs
nodeJS删除文件方法示例
Dec 25 #NodeJs
详解nodejs 文本操作模块-fs模块(五)
Dec 23 #NodeJs
详解Nodejs的timers模块
Dec 22 #NodeJs
详解nodejs 文本操作模块-fs模块(四)
Dec 22 #NodeJs
详解nodejs 文本操作模块-fs模块(三)
Dec 22 #NodeJs
You might like
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
什么是python的id函数
2020/06/11 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
九年级英语教学反思
2014/01/31 职场文书
暑期社会实践方案
2014/02/05 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
国庆阅兵观后感
2015/06/15 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书