highcharts在导出时如何自定义图表的表头

最新推荐文章于 2023-12-26 16:40:09 发布

原创最新推荐文章于 2023-12-26 16:40:09 发布 · 750 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#需求 #api #控件 #函数

本文介绍如何使用Highcharts实现图表导出时让用户自定义表头名称，并提供了具体的JavaScript代码实现，包括打印图表、导出不同格式的图片及文档。

今天一天都在搞客户提出的需求，有这样一个需求说的是在导出图表的时候可以让客户自己去输入表头。因为我使用的是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'
});
}
}
}
]
}
}
}