报表导出为CVS,pdf格式文件格式
2014-12-05 10:14
357 查看
认识:
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 可以点击下载至本地也可以直接在...
之前的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服务页面来加以处理所带来不可控的局面。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java操作office和pdf文件页面列表导出cvs，excel、pdf报表.
- java操作office和pdf文件（四）页面列表导出cvs，excel、pdf报表.
- java操作office和pdf文件页面列表导出cvs，excel、pdf报表.
- Java程序员从笨鸟到菜鸟之（一百零六）java操作office和pdf文件（四）页面列表导出cvs，excel、pdf报表.
- java操作office和pdf文件页面列表导出cvs，excel、pdf报表.
- Java程序员从笨鸟到菜鸟之（一百零六）java操作office和pdf文件（四）页面列表导出cvs，excel、pdf报表.
- java操作office和pdf文件（四）页面列表导出cvs，excel、pdf报表.
- Java程序员从笨鸟到菜鸟之（一百零六）java操作office和pdf文件（四）页面列表导出cvs，excel、pdf报表.
- 水晶报表导出PDF or Excel,并返回文件到用户的IE浏览器中
- 水晶报表导出为pdf, word , excel 格式（已经测试过，实现了该功能）
- 水晶报表导出为pdf, word , excel 格式（已经测试过，实现了该功能）
- 水晶报表导出为pdf, word , excel 格式（已经测试过，实现了该功能）
- [水晶报表]导出文件格式的设置.
- Java程序员从笨鸟到菜鸟之（一百零五）java操作office和pdf文件（三）利用jxl实现数据导出excel报表以及与POI的区别
- 水晶报表导出PDF or Excel,并返回文件到用户的IE浏览器中
- 水晶报表导出为word,excel和pdf格式
- Java程序员从笨鸟到菜鸟之（一百零四）java操作office和pdf文件（二）利用POI实现数据导出excel报表
- [水晶报表]导出PDF or Excel,并返回文件到用户的IE浏览器中
- Java程序员从笨鸟到菜鸟之（一百零四）java操作office和pdf文件（二）利用POI实现数据导出excel报表
- [已解决]MSTR报表以PDF格式导出后中文汉字不能显示