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

'" 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;
}