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

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

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

(0)

相关推荐

  • Highcharts 多个Y轴动态刷新数据的实现代码

    效果图: js代码: $(function() { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', animation: Highcharts.svg, // don't animate in ol

  • 动态更新highcharts数据的实现方法

    动态更新highcharts数据的实现方法 <!doctype html> <html> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="htt

  • 通过php动态传数据到highcharts

    1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示.今天别人问怎么在本地演示一下请求的动态数据. 2:在本地搭建环境,我用的WampServer,下载地址:http://xiazai.jb51.net/201703/yuanma/WampServer_2.5_jb51.rar,浏览器打开localhost,文件存放在wamp/www目录下 3:php代码,没有写与数据库实时请求的过程. <?php $b = array( array('name'=>'

  • Highcharts学习之数据列

    什么是数据列 数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列配置是个数组,也就是数据配置可以包含多个数据列. 数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中 tags: 1.数据列中的数据填充: 方法一:一维数组 如果有categories属性的话就是使用一维数组 data : [1, 4, 6,

  • Highcharts使用简例及异步动态读取数据

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. 第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src="html/js/ch

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

    前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取 由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置 为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne

  • pandas实现数据可视化的示例代码

    目录 一.概述 1.1 plot函数参数 1.2 本文用到的数据源说明 二.折线图--kind='line' 三.柱状图--kind='bar' 3.1 各组数据(列)分开展示 3.2 各组(列)数据合并展示--stacked 3.3  横向柱状图--kind='barh' 四.直方图--kind='hist' 4.1 概述 4.2 自定义直方图横向区间数量 4.3 多子图展示多序列数据 4.4 一维数据密度图--kind='kde' 4.5 累积直方图--cumulative = True 五

  • Python实现交通数据可视化的示例代码

    目录 1.TransBigData简介 2.数据预处理 3.数据栅格化 4.订单起讫点OD提取与聚合集计 5.交互可视化 1.TransBigData简介 TransBigData是一个为交通时空大数据处理.分析和可视化而开发的Python包.TransBigData为处理常见的交通时空大数据(如出租车GPS数据.共享单车数据和公交车GPS数据等)提供了快速而简洁的方法.TransBigData为交通时空大数据分析的各个阶段提供了多种处理方法,代码简洁.高效.灵活.易用,可以用简洁的代码实现复杂

  • SpringBoot+thymeleaf+Echarts+Mysql 实现数据可视化读取的示例

    目录 实现过程 1. pom.xml 2. 后端程序示例 3. 前端程序示例 通过从数据库获取数据转为JSON数据,返回前端界面实现数据可视化. 数据可视化测试 实现过程 1. pom.xml pom.xml引入(仅为本文示例需要,其他依赖自行导入) <!--Thymeleaf整合security--> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymele

  • Keras搭建M2Det目标检测平台示例

    目录 什么是M2det目标检测算法 M2det实现思路 一.预测部分 1.主干网络介绍 2.FFM1特征初步融合 3.细化U型模块TUM 4.FFM2特征加强融合 5.注意力机制模块SFAM 6.从特征获取预测结果 7.预测结果的解码 8.在原图上进行绘制 二.训练部分 1.真实框的处理 2.利用处理完的真实框与对应图片的预测结果计算loss 训练自己的M2Det模型 一.数据集的准备 二.数据集的处理 三.开始网络训练 四.训练结果预测 什么是M2det目标检测算法 一起来看看M2det的ke

  • python数据可视化使用pyfinance分析证券收益示例详解

    目录 pyfinance简介 pyfinance包含六个模块 returns模块应用实例 收益率计算 CAPM模型相关指标 风险指标 基准比较指标 风险调整收益指标 综合业绩评价指标分析实例 结语 pyfinance简介 在查找如何使用Python实现滚动回归时,发现一个很有用的量化金融包--pyfinance.顾名思义,pyfinance是为投资管理和证券收益分析而构建的Python分析包,主要是对面向定量金融的现有包进行补充,如pyfolio和pandas等. pyfinance包含六个模块

  • R语言数据可视化绘图Dot plot点图画法示例

    目录 Step1. 绘图数据的准备 Step2. 绘图数据的读取 Step3.绘图所需package的安装.调用 Step4.绘图 添加平均值 添加误差线 今天要给大家介绍的是点图(Dot plot),点图展示的数据比较简单,但胜在好看啊. 作图数据如下: Step1. 绘图数据的准备 首先要把你想要绘图的数据调整成R语言可以识别的格式,建议大家在excel中保存成csv格式. Step2. 绘图数据的读取 data<-read.csv("your file path", hea

  • R语言绘制数据可视化小提琴图画法示例

    目录 Step1. 绘图数据的准备 Step2. 绘图数据的读取 Step3. 绘图所需package的安装.调用 Step4. 绘图 小提琴图之前已经画过了,不过最近小仙又看到一种貌美的画法,决定复刻一下.文献中看到的图如下: Step1. 绘图数据的准备 首先要把你想要绘图的数据调整成R语言可以识别的格式,建议大家在excel中保存成csv格式.作图数据如下: Step2. 绘图数据的读取 data<-read.csv("your file path", header = T

  • 基于vue+echarts 数据可视化大屏展示的方法示例

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

  • Vue引入highCharts实现数据可视化

    本文实例为大家分享了Vue引入highCharts实现数据可视化的具体代码,供大家参考,具体内容如下 效果图 文档Api地址 安装 npm install highcharts-vue 在main.js进行全局配置 import HighchartsVue from 'highcharts-vue' Vue.use(HighchartsVue) <highcharts :options="chartOptions"></highcharts> <scrip

随机推荐