2014/10/20

Highcharts 扩展之多张图表合并生成一张图

在highchart的导出需求中，我们做过单个图表的导出，生成单个图片，也做过多个图表同时导出，生成多张图片。但很少遇到这样一种情况，需要将客户端的图表同时导出，并合并生成在一张图片上。

今天为大家来highchart一个扩展，原理就是在一键导出的时候，根据highchart现有的API方法去获取每个图表的SVG图片信息，然后拼接好合并成一个svg，最后提交给后台进行处理，这个功能即可将多个图表生成在一张图片上，也可以一次请求到后台生成多个图片，但需要自己在后台做svg拆分，一个一个生成。

步入正题，首先引入扩展部分的javascript代码到head标签区域，或者单独建一个js文件

Highcharts.getSVG = function (charts) {
        var svgArr = [],
            top = 0,
            width = 0;
 
        $.each(charts, function (i, chart) {
 
            var svg = chart.getSVG();
            svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
            svg = svg.replace('</svg>', '</g>');
            //svg = svg.replace('<svg', '<zg ct=' + chart.options.chartype);
            //svg = svg.replace('</svg>', '</zg>');(这段注释的代码用来生成多个图片)
 
            top += chart.chartHeight;
            width = Math.max(width, chart.chartWidth);
 
            svgArr.push(svg);
        });
 
        return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

分析：
这段代码是对getSVG的扩展，传入charts数组即页面上所有图表的集合。
然后遍历每个图表获取它们对应的svg信息，然后将svg替换成g标签（g标签定义：将具有相同属性的一个或多个元素编组在一起）
接着将替换后的内容加入svgArr数组，最后重新建一个svg将它们包起来形成一个新的svg图片信息，一并发送到后台。
到这里还没结束，以上只是扩展了svg方法，那么我们一键导出时候，如何将合并后的信息发送到后台呢？

###如何批量处理每个chart对象的参数呢？接着往下看
然后我们做另外一个扩展:

Highcharts.exportCharts = function (charts, options) {
      var form
      svg = Highcharts.getSVG(charts);
      // 合并选项
      options = Highcharts.merge(Highcharts.getOptions().exporting, options);
 
      // 新建form
      form = Highcharts.createElement('form', {
          method: 'post',
          action: options.url
      }, {
          display: 'none'
      }, document.body);
 
      // 添加参数
      Highcharts.each(['filename', 'type', 'width', 'svg', 'DTime'], function (name) {
          Highcharts.createElement('input', {
              type: 'hidden',
              name: name,
              value: {
                  filename: options.filename || 'chart',
                  type: options.type,
                  width: options.width,
                  svg: svg,
                  DTime: options.DTime //(此参数为自定义参数)
              }[name]
          }, null, form);
      });
      //console.log(svg); return;
      // submit
      form.submit();
      //清除
      form.parentNode.removeChild(form);
  };

分析：
上面这段代码是当我们执行一键导出时，需要调用的方法同样需要一个chart数组，将页面上所有初始化的chart对象放入到这个数组，第二个参数是highchart的导出参数，参考官网的导出API.
扩展工作作到此结束！

最终调用方法：

function BtnExport()
{
    Highcharts.exportCharts(chartArray,
     {
        type: 'image/jpeg',
        width: '650',
        DTime: DateTime,
        url: location.href + "?action=export"
    });
}

注：这个方法点击导出的时候调用即可，后台获取到svg信息后自行处理生成图片即可，chartArray 可申明为全局变量，页面初始化的时候，将每个chart对象push进去即可！

Peng8 | 鹏吧

do one thing at a time and do well

Highcharts 扩展之多张图表合并生成一张图