Как кэшировать DOM переменной в JQuery

Question

Demo

Использование JQuery и highchart.js (+ exporting.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'); 

должна возвращать строку «Chart1» (если .data() здесь действует как метод Jquery по умолчанию) , а что вы сделали равно

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

ведьма отличается с

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

Я предполагаю, что есть что-то нужно сделать, чтобы после того, как вы получите строку «chart1» означает, что вы Sh ould преобразует эту строку в объект chart1.

Если есть что-то, что мне нужно знать (возможно, о highchart.js), скажите, пожалуйста.

EDIT:

согласно ответу @Alexander «s, вы можете сделать это:

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

Answer 3

Из того, что я понимаю, вы хотите прочитать объект chart1.

Есть 2 варианта.

1. Используйте id объекта.
2. Если вам нужно использовать только ваш код, вам необходимо будет внести следующие изменения.

Изменить это:

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

к этому:

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

Event Handler

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

Надеюсь, это поможет.