Question

使用jquery和highchart.js（+ exports.js模块）我试图通过下面的自定义按钮导出图表

<button type="button" id="chartpdf" data-chart="chart1" class="pdf-download">PDF</button>

虽然代码正在以这种

的硬编码格式导出图表

chart1.exportChart({type: "application/pdf"});

尝试从元素数据属性chart1动态获取data-chart="chart1"时无效

$(document).on("click", ".pdf-download", function(){
     $(this).data('chart').exportChart({type: "application/pdf"});
});

你可以告诉我如何解决这个问题吗？

由于

Answer 1

试试这个

$( CHART ID ).highcharts().exportChart({type: "application/pdf"});

Example

Answer 2

我还没有使用highchart.js，我也不知道它如何处理图表。但是在你的点击监听器中

$(this).data('chart');

应该返回一个字符串＆＃39; chart1＆＃39; （如果.data（）在这里充当jQuery的默认方法）你所做的就等于

('chart1').exportChart({type: "application/pdf"});

女巫与

不同

chart1.exportChart({type: "application/pdf"});

我想在得到＆＃39; chart1＆＃39;之后应该做些什么。串意思是你应该将此字符串转换为chart1对象。

如果有什么我需要知道的（关于highchart.js），请告诉我。

编辑：

根据@Alexander的回答，你可以这样做：

$(document).on("click", ".pdf-download", function(){
     var id = $(this).data('chart')
     $("#"+id).highcharts().exportChart({type: "application/pdf"});
});

Answer 3

据我所知，您想要阅读对象chart1。

有两种选择。

使用对象的id。
如果您只需要使用代码，则需要进行以下修改。

更改此内容：

$(function () {
    var chart1 = new Highcharts.Chart({

到此：

var chart1;
$(function () {
    chart1 = new Highcharts.Chart({

事件处理程序

$(document).on("click", ".pdf-download", function(){
    window[$(this).attr('data-chart')].exportChart({type: "application/pdf"});
});

希望这有帮助。

如何在jQuery中缓存DOM变量

3 个答案: