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 28 NodeJs
nodejs初步体验篇
Nov 23 NodeJs
Nodejs抓取html页面内容(推荐)
Aug 11 NodeJs
Nodejs高扩展性的模板引擎 functmpl简介
Feb 13 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 NodeJs
使用npm安装最新版本nodejs
Jan 18 NodeJs
nodejs爬虫初试superagent和cheerio
Mar 05 NodeJs
利用nodeJs anywhere搭建本地服务器环境的方法
May 12 NodeJs
nodejs初始化init的示例代码
Oct 10 NodeJs
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
Dec 06 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php设置编码格式的方法
2013/03/05 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
vue-axios使用详解
2017/05/10 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
JS实现打字游戏
2019/12/17 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python单元测试unittest实例详解
2015/05/11 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
python适合人工智能的理由和优势
2019/06/28 Python
python实现mean-shift聚类算法
2020/06/10 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
日语专业推荐信
2013/11/12 职场文书
大学生党课思想汇报
2013/12/29 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
同居协议书范本
2014/04/23 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
环保守法证明
2015/06/24 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
python开发实时可视化仪表盘的示例
2021/05/07 Python
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android