Highcharts+NodeJS搭建数据可视化平台示例
作者:fareise 发布时间:2024-05-02 17:38:38
前一段时间完成了一个数据可视化项目,由后台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;
}
来源:http://blog.csdn.net/fareise/article/details/53899514
猜你喜欢
- 工作中遇到一个问题,两个字符串匹配,要求:每个字符串中最多含有一个*,?可以无限多个*代表一个任意长度的字符串,而?则代表一个字符要求可以提
- 最近一直在准备用来面试的几个小demo,为了能展现自己,所以都是亲自设计并实现的,其中一个就是在50行代码内来实现一个贪吃蛇,为了说明鄙人自
- 1.计算变量缺失率df=pd.read_csv('titanic_train.csv')def missing_cal(df
- 首先说明代码只是帮助理解,并未写出梯度下降部分,默认参数已经被固定,不影响理解。代码主要实现RNN原理,只使用numpy库,不可用于GPU加
- 目录1. 理解 * 和 ** 2.Python函数的参数 3. 支持任意参数的函数
- 情感短文本分类TextRNN是一种循环神经网络(RNN)结构,特别适用于处理序列数据。它通过将上一个时刻的隐状态与当前时刻的输入进行结合,来
- python 换位密码算法的实例详解一前言:换位密码基本原理:先把明文按照固定长度进行分组,然后对每一组的字符进行换位操作,从而
- 小程序中英文混合排序问题在开发一个手机联系人列表的功能时,遇到需求是需要将联系人列表按照拼音顺序排序。而联系人列表是会出现中英文混合的情况。
- import React, { Component } from 'react';import { Table, Input
- 50个常用sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(
- 1.登录mysql: mysql -u root -h 127.0.0.1 -p2.切换数据库 use mysql3.授权grant all
- 目录题目描述:思路:代码:改良版采用递归数学方法题目描述:编写一个算法来确定一个数字是否“快乐”。 快乐的数字按照如下方式确定:从一个正整数
- 在python的使用中,有时也不得不调用一下外部程序,那么如何调用外部程序:首先,我们要启动python软件,使用的是python2.7的版
- python调用mysql数据库通常通过mysqldb模块,简单说下如何调用1.安装驱动目前有两个MySQL的驱动,我们可以选择其中一个进行
- 程序开始一、基本使用1、创建一个游戏窗口出来代码如下:# coding:utf8import pygameimport sys# 初始化py
- 最近使用Python调用百度的REST API实现语音识别,但是百度要求音频文件的压缩方式只能是pcm(不压缩)、wav、opus、spee
- 1、授权机制的主要作用是什么?授权机制的基本作用是给某个主机上的用户对某个数据库以select,insert,update和detete的权
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- python的正则是通过re模块的支持匹配的3个函数match :只从字符串的开始与正则表达式匹配,匹配成功返回matchobject,否则
- 近日在做门户的用户评论时,好长时间没有用jquery了正好用一下,没想到偷工用了post方法去处理ajax回调的json数据,死活取不到,后