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写的一个简单项目打包工具
May 11 NodeJs
Express与NodeJs创建服务器的两种方法
Feb 06 NodeJs
NodeJS配置HTTPS服务实例分享
Feb 19 NodeJs
详解nodejs爬虫程序解决gbk等中文编码问题
Apr 06 NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
nodejs中方法和模块用法示例
Dec 24 NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 NodeJs
NodeJs crypto加密制作token的实现代码
Nov 15 NodeJs
nodejs对mongodb数据库的增加修删该查实例代码
Jan 05 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php批量删除操作代码分享
2017/02/26 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
python单链表实现代码实例
2013/11/21 Python
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Django缓存系统实现过程解析
2019/08/02 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
Python grpc超时机制代码示例
2020/09/14 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
社区端午节活动方案
2014/01/28 职场文书
大学生自我鉴定书
2014/03/24 职场文书
保安公司服务承诺书
2014/05/28 职场文书
大学生创业计划书
2014/08/14 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
员工手册编写范本
2015/05/14 职场文书
2015年电教工作总结
2015/05/26 职场文书