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

前一段时间完成了一个数据可视化项目，由后台NodeJS＋Highcharts框架进行搭建。下面分享一下整个开发过程的流程，以及使用Highcharts框架的经验。

一、数据的读取

       由于数据库使用的是MySQL数据库，在NodeJS中，可以使用NodeJS中的mysql模块进行mysql数据库的相关操作，通过npm安装即可。

       1.数据库基本配置

  为了方便，我们最好先进行一个数据库连接的基本配置，mysql模块需要的配置信息如下：

[javascript]  view plain  copy

 print ?

1. var connection = mysql.createConnection({  
2.   host     : '127.0.0.1',  
3.   user     : 'root',  
4.   password : 'root',  
5.   database : 'Your_Database',  
6.   port : 3306  
7. });  

       tips：当我们在本地开发时，可以先将线上数据库中的数据拷贝一部分到本地，如利用php myadmin，然后通过读取本地数据进行开发。

2.数据库连接

我们可以设定，当访问到某个url后，自动建立mysql连接，代码如下：

[javascript]  view plain  copy

 print ?

1. router.get('/test', function (req, res, next) {  
2.   var username = req.cookies.username;  
3.   if(typeof username === "undefined" || username != "yidianzixun@163.com"){  
4.     res.redirect('/');  
5.   }else{  
6.     if(connection.threadId){  
7.       return;  
8.     }else{  
9.       connection.connect(function(err) {  
10.         if (err) {  
11.           console.error('error connecting: ' + err.stack);  
12.           return;  
13.         }  
14.         console.log('connected as id ' + connection.threadId);  
15.       });  
16.     }  
17.   }  
18. })  

注意这里面的验证。我们这里的项目比较简单，仅使用cookie做身份验证。当我们要建立数据库连接时，首先一定要进行身份验证，否则任何人发送请求就都可以和我们的数据库进行连接了，会造成很严重的安全隐患。

通过调用mysql中的connect方法，进行mysql数据库的连接。这里注意，数据库的连接不能并行，否则会报错。因此为了安全，我们首先必须要先判断一下当前是否已经连接了数据库，这里可以使用connection.threadId判断其是否定义，从而判断其是否已经建立连接。如果已经建立了连接，则不要再次建立连接。
3.执行查询语句

通过调用query()方法，即可处理语句查询操作，输入的内容可以是任何正确的mysql查询语句，也可以嵌套其他变量，最后只要拼接出一个字符串即可。实例如下：

[javascript]  view plain  copy

 print ?

1. router.post('/test', function (req, res, next) {  
2.   var startDate = req.body.startDate;  
3.   var endDate = req.body.endDate;  
4.   connection.query('SELECT `date`, COUNT(DISTINCT `idea_id`) AS num,   
5.     SUM(`view`) AS view, SUM(`click`) AS click,   
6.     SUM(`cost`) AS cost FROM `idea_report_all`   
7.     where `date` BETWEEN "' + startDate + '" AND "' + endDate +   
8.     '" GROUP BY `date` ORDER BY `date` ASC', function(err, rows, fields) {  
9.     if (err) throw err;  
10.     var rows = calculate(rows);  
11.     res.send(JSON.stringify(rows));  
12.   });  
13. })  

这里我们根据获取到的开始日期和截止日期，拼接成一个query语句，查询出我们需要的数据，最后可以在回调函数中调用（rows参数），是一个数组。

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

二、HighCharts使用

       Highcharts的使用可以在官方API上查看各个方法，而且有在线演示，非常方便（推荐Highcharts中文网）。其中最麻烦的就是要绘制的图表的配置项所需要的各个参数所组成的对象。建议设定一个构造这个对象的构造器，根据传入的各个参数构造出对应需要的HighCharts配置项。因为传入的参数过多，我们要使用对象的形式进行构建。关于HighCharts框架的更多使用，将在以后博客中更新，可以先看一下下面这个构造的例子。

[javascript]  view plain  copy

 print ?

1. function greateOptions (id, text, xAxisTitle, date, yAxisTitle1, yAxisTitle2, k1,unit1, k2,unit2, series, color, tooltip) {  
2.     var data = new Object();  
3.     data.chart = {  
4.         renderTo: id,  
5.     marginLeft: 50,  
6.     marginTop: 70  
7.     };  
8.   data.colors = color;  
9.     data.title = {  
10.         text: text,  
11.         align: "left"  
12.     };  
13.   data.tooltip = {  
14.     crosshairs: true,  
15.     shared: true,  
16.     useHTML: true,  
17.     style: {  
18.       padding: 10  
19.     },  
20.     headerFormat: '<table><tr><td>' + tooltip + '：</td><td>{point.key}</td></tr>',  
21.     pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +  
22.                  '<td style="text-align: left"><b>{point.y}</b></td></tr>',  
23.     footerFormat: '</table>'  
24.   };  
25.   data.noData = {  
26.     style: {  
27.       fontWeight: 'bold',  
28.       fontSize: '15px',  
29.       color: '#303030'  
30.     }  
31.   };  
32.   data.lang = {  
33.     noData: "正在为您加载数据......"  
34.   };  
35.   data.credits = {  
36.     enabled: false  
37.   };  
38.     data.xAxis = {  
39.         tickPosition: 'outside',  
40.     title : {  
41.         text: xAxisTitle || ''  
42.     },  
43.     categories: date  
44.     };  
45.     data.yAxis = [{  
46.         lineWidth: 1,  
47.         title: {  
48.             text: yAxisTitle1 || ''  
49.         },  
50.         labels: {  
51.             formatter: function(){  
52.                 return this.value/k1 + unit1;  
53.             }  
54.         }  
55.     },{  
56.         lineWidth: 1,  
57.         opposite: true,  
58.         title: {  
59.             text: yAxisTitle2 || ''  
60.         },  
61.         labels: {  
62.             formatter: function(){  
63.                 return this.value/k2 + unit2;  
64.             }  
65.         }  
66.     }];  
67.     data.series = series;  
68.     return data;  
69. }