Highcharts＋NodeJS搭建数据可视化平台

标签：odata   osi   官方   api   false   并行   into   html   简单   

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

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);
      });
    }
  }
})

通过调用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));
  });
})

最后，将这个数据反回给前台即可，前台进行数据的处理和可视化。

二、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;
}

Highcharts＋NodeJS搭建数据可视化平台

标签：odata   osi   官方   api   false   并行   into   html   简单   

原文地址：http://blog.csdn.net/fareise/article/details/53899514