highcharts在导出时如何自定义图表的表头
2016-02-23 17:21
295 查看
今天一天都在搞客户提出的需求,有这样一个需求说的是在导出图表的时候可以让客户自己去输入表头。因为我使用的是highcharts控件,所以自然而然的区api里查,后来查来半天并经过和同事的讨论把问题解决了。
代码如下:
exporting: {
buttons: {
contextButton: {
menuItems: [
{
text: '打印图表',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.print();
}
}
}, {
text: '导出png图片',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.exportChart({
type: 'image/png'
});
}
}
}, {
text: '导出jpeg图片',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.exportChart({
type: 'image/jpeg'
});
}
}
},
{
text: '导出pdf文档',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.exportChart({
type: 'application/pdf'
});
}
}
},
{
text: '导出svg矢量图',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.exportChart({
type: 'image/svg+xml'
});
}
}
}
]
}
}
}
代码如下:
exporting: {
buttons: {
contextButton: {
menuItems: [
{
text: '打印图表',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.print();
}
}
}, {
text: '导出png图片',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.exportChart({
type: 'image/png'
});
}
}
}, {
text: '导出jpeg图片',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.exportChart({
type: 'image/jpeg'
});
}
}
},
{
text: '导出pdf文档',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.exportChart({
type: 'application/pdf'
});
}
}
},
{
text: '导出svg矢量图',
onclick: function () {
var headstr = prompt("请输入表头名称", "");
if (headstr) {
$('#container').highcharts().setTitle({ text: headstr });
this.exportChart({
type: 'image/svg+xml'
});
}
}
}
]
}
}
}
相关文章推荐
- Android Manifest 用法
- 什么是 GraphQL?
- Spark RDD API详解(一) Map和Reduce
- lwn拾遗:[sn3218 led drivers]-api解释-1
- Mootools 1.2教程 函数
- autoit InputBox 函数
- 文件遍历排序函数
- 一个小型js框架myJSFrame附API使用帮助
- flex 控件的重要属性
- Oracle 函数大全[字符串函数,数学函数,日期函数]第1/4页
- Delphi控件ListView的属性及使用方法详解
- 详细分析交换机、路由器、集线器的区别和联系
- PowerShell打开或关闭光驱
- ASP下经常用的字符串等函数参考资料
- PostgreSQL教程(五):函数和操作符详解(1)
- DOS批处理 函数定义与用法
- asp Chr 函数 数字转字母的方法
- 批处理的api WMIC学习体会有感第1/2页
- 批处理 API实现文件下载的代码第1/2页
- Lua中的函数精讲笔记