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 npm包管理的配置方法及常用命令介绍
Jun 05 NodeJs
详谈nodejs异步编程
Dec 04 NodeJs
Nodejs实现的一个静态服务器实例
Dec 06 NodeJs
nodejs简单实现操作arduino
Sep 25 NodeJs
详解NodeJs支付宝移动支付签名及验签
Jan 06 NodeJs
NodeJs下的测试框架Mocha的简单介绍
Feb 22 NodeJs
nodejs爬虫遇到的乱码问题汇总
Apr 07 NodeJs
nodejs服务搭建教程 nodejs访问本地站点文件
Apr 07 NodeJs
nodejs中Express与Koa2对比分析
Feb 06 NodeJs
Nodejs处理异常操作示例
Dec 25 NodeJs
详解nodejs http请求相关总结
Mar 31 NodeJs
NodeJS和浏览器中this关键字的不同之处
Mar 03 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
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python实现倒计时小工具
2019/07/29 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
《假如》教学反思
2014/04/17 职场文书
会议欢迎标语
2014/06/30 职场文书
无房证明范本
2014/09/17 职场文书
硕士学位申请报告
2015/05/15 职场文书