Highcharts

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

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

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

  • 步入正题，首先引入扩展部分的javascript代码到head标签区域，或者单独建一个js文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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>';
    };

查看更多

Highcharts

highchart通用配置文件及使用说明

使用 highcharts 已经有好几年的时间了，用过很多图表插件！例如 funsionchart、dhtmlxChart、jqPlot、JS Charts、Open Flash Chart、Flot，在到国产最近比较好的 echarts ，这里面有基于javascript的，也有基于flash的，但最喜欢的还是 highcharts，这些图表插件基本的图表功能大部分都能满足，但区别在于图表的功能可扩展性及浏览器兼容性上，highcharts 有明显的优势。

配置文件介绍

  • 下面步入正题，给大家分享一个 highcharts 全局配置文件，其实也没什么，无非就是将通用api里的参数放在了一个方法里，这样初始化图表就不用每次都去写一大串配置，而是用到什么参数就写什么参数，具体请看下面这段javascript代码

    查看更多

Highcharts

highcharts 结合phantomjs纯后台生成图片

highcharts 这个图表展示插件我想大家应该都知道，纯javascript编写，相比那些flash图表插件有很大的优势，至少浏览器不用考虑是否装了flash插件，功能也非常的强大，详细请看官网 ，我就不做多介绍了。

那今天咱们讨论的难题是我们平时用highchart生成图片时，首先要在前端展示出图表，然后通过图表的API 按钮或者自定义的按钮 来向后台发起请求，后台获取到图片的SVG信息时，然后根据SVG的信息生成对应的图片或者PDF文件输出到流供客户端下载或者直接保存在服务端。

那么这个图片生成必须依赖前台生成的图表来触发，那有些图片我们又想自动生成又不需要前端，生成后直接通过邮件发送或者写入word文件，该如何做呢？

有人会想可以模拟前台自动向后台发送请求，我这样试过，效率非常不敬人意！后来看了官方的一些介绍，引入了phantomjs 这个好东西，它是个javascript引擎库，基于webkit内核，能解析前台的HTML及javascript并生成对应的图片，最重要的一点是它能够以服务的形式独立运行在后端，接下来是详细步骤：

查看更多

Highcharts

如何使用highcharts自定义按钮导出图片

接触highcharts这个图表插件已经有好几年了，摸打滚爬到现在可以说对highchart已经有一定的了解了

首先 Highcharts 本身就提供了导出图片的功能，只需要在配置中增加相应的参数即可

1
2
3
4
5
navigation : {
	buttonOptions : {
		enabled : true
	}
}

设置完毕即可导出图片了，但是这种方式有个缺点，就是导出图片时会请求highchart官方的服务器生成图片，最后返回客户端给用户下载，我们可以在官方源码中看到这样一段代码：

1
2
3
4
5
6
defaultOptions.exporting = {
	//enabled: true,
	//filename: 'chart',
	type: 'image/png',
	url: 'http://export.highcharts.com/'
}

那如何请求自己的服务器生成对应的图片呢？官方API已经为我们留出了对应的接口供我们调用
点击这里可以查看exportChart相关属性

查看更多