报表导出为CVS,pdf格式文件格式

来源：互联网发布：js调手机话筒编辑：程序博客网时间：2024/04/29 22:58

认识:
Chart：设置图表区相关属性，其中renderTo的值，表示此图表显示的div的id名称。（后面会有如何动态设置此值的说明）
xAxis ：x轴选项，即设置横坐标的相关信息。
yAxis：y轴选项，即设置纵坐标的相关信息。
series数据列选项：用于设置图表中要展示的数据的数据相关属性。（很重要的一个属性，就是显示的数据源的信息）
plotOption数据点选项：根据图表类型不同，属性也有差异。所以不做详细说明。
tooltip数据点提示框：当鼠标划到图上时，显示的提示信息。
legend图例选项：设置图例相关信息，即那个小的说明的信息。

摘要:

之前的highcharts版本都是支持图表导出功能的，导出的可以为图片文件和pdf以及svg文件，为了更加方便地查看图表数据和分析数据，我们还是需要导出具体的series和categories数据，我们的想法是导出为excel文件或者csv文件，以上两者都可以直接用excel打开。
之前也有一篇借用浏览器的ActiveX插件来实现导出excel文件的文章：http://www.stepday.com/topic/?544 今天我们就来扩展一下highcharts如何直接导出csv格式的文件。
根据highcharts官方的扩展组件来看，我们需要下载导出csv的核心js文件：https://rawgithub.com/highslide-software/export-csv/master/export-csv.js 可以点击下载至本地也可以直接在自己的页面内引入，形如：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/export-csv/master/export-csv.js"></script>

extporting.js文件的引入还是很有必要的，因为扩展就是在图表导出目录内进行的。
这里提供一个完整的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Highcharts test tool - jsFiddle demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>


<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>

<style type='text/css'>

</style>

<script type='text/javascript'>//<![CDATA[
$(function(){
var chart = new Highcharts.Chart({

chart: {
renderTo: 'container'
},

title: {
text: '将图表数据导出为csv格式文件'
},

xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits:{
text:"www.stepday.com",
href:"http://www.stepday.com"
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

});

$('#getcsv').click(function () {
alert(chart.getCSV());
});

});//]]>

</script>

</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/export-csv/master/export-csv.js"></script>

<div id="container" style="height: 300px; margin-top: 2em"></div>

<button id="getcsv">获得图表的CSV数据</button>

</body>

</html>

效果查看地址为：http://fiddle.jshell.net/cqjvD/234/show/
扩展组件理解：
1、扩展组件的版本要求是highcharts的版本至少要大于3.0.0,否则无效；
2、组件所做的其实也没其他的，主要是扩展了一下getCSV()方法：

var each = Highcharts.each;
Highcharts.Chart.prototype.getCSV = function () {
var columns = [],
line,
tempLine,
csv = "",
row,
col,
options = (this.options.exporting || {}).csv || {},

// Options
dateFormat = options.dateFormat || '%Y-%m-%d %H:%M:%S',
itemDelimiter = options.itemDelimiter || ',', // use ';' for direct import to Excel
lineDelimiter = options.lineDelimeter || '\n';

each (this.series, function (series) {
if (series.options.includeInCSVExport !== false) {
if (series.xAxis) {
var xData = series.xData.slice(),
xTitle = 'X values';
if (series.xAxis.isDatetimeAxis) {
xData = Highcharts.map(xData, function (x) {
return Highcharts.dateFormat(dateFormat, x)
});
xTitle = 'DateTime';
} else if (series.xAxis.categories) {
xData = Highcharts.map(xData, function (x) {
return Highcharts.pick(series.xAxis.categories[x], x);
});
xTitle = 'Category';
}
columns.push(xData);
columns[columns.length - 1].unshift(xTitle);
}
columns.push(series.yData.slice());
columns[columns.length - 1].unshift(series.name);
}
});

// Transform the columns to CSV
for (row = 0; row < columns[0].length; row++) {
line = [];
for (col = 0; col < columns.length; col++) {
line.push(columns[col][row]);
}
csv += line.join(itemDelimiter) + lineDelimiter;
}

return csv;
};

拿到图表的series数据和categories数据形成一个二维数组返回即可。
3、csv文件的导出主要是传递获取到的图表csv数据作为参数传递至服务页面 http://www.highcharts.com/studies/csv-export/csv.php 进行处理然后保存为csv格式的文件。
Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
text: Highcharts.getOptions().lang.downloadCSV || "Download CSV",
onclick: function () {
Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
csv: this.getCSV()
});
}
});

我们自己也可以编写一个将csv数据经过处理然后保存为csv格式的文件。这样一来我们就不用依托官方的csv.php服务页面来加以处理所带来不可控的局面。

0 0