JqPlot As Image

В последних примерах JqPlot (см. здесь, есть кнопки под некоторыми диаграммами, которые вы можете щелкнуть, а div сдвигается вниз с диаграммой как изображение, позволяющее щелкнуть правой кнопкой мыши и сохранить как.

Я проверил источник, и я просто не вижу себя, где это происходит. Я видел различные обсуждения об этом (см. здесь, однако мой javascript является базовым в лучшем случае. Однако это то, что я хотел бы реализовать в своем текущем проекта.

Кто-нибудь знает полный учебник о том, как это сделать, то есть от фактического кода jquery вплоть до реализации в html-коде.

ОТВЕТЫ

Ответ 1

Вот простейший пример:

//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ // append the img to the DOM

Fiddle здесь.

Ответ 2

Отметьте спасибо за ваш вклад. Просто добавление иногда может быть смешанным (включенным) курсором и функцией масштабирования, и вам может понадобиться создать изображение раздела графика, надеясь вернуться назад, чтобы увеличить назад, чтобы создать изображения других разделов. это может быть нелегко, так как jqPlot не вернет график для исходного графика, поэтому вы должны это сделать для себя вручную.

Мое средство правовой защиты

  • Обогатите опции $.jqplot с помощью

    cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false, dblClickReset:true, }

    это позволяет пользователям быть в состоянии вернуться к первоначальному виду графиков. если вы выберете этот подход, не забудьте советовать своим пользователям о том, как вернуться обратно с помощью совета, например

    Double click on the Graph to Reset Zoom back to 100% для удобства использования.

Для тех, кто больше склонен к кодированию. Это средство, оно включает некоторые из кода, введенные Марк (спасибо снова)

  • Создайте кнопку прямо под графиком, предоставите атрибут id и привяжите четный обработчик к его функции щелчка,

            <button id="show_revert_graph_btn" class="jqplot-replot-button" title="Reset Zoom back to 100%">Revert the Graph</button>

  • присоединить прослушиватель событий и реализовать/зарегистрировать обработчик, подобный этому

$('#show_revert_graph_btn').click(function(){
  // simulating a double click on the  canvas
  // not that the selecting expression includes 
  // the div id of where i chose to plot the chart "chart104" and the default class
  // provided to the canvas holding my chart i.e "canvas.jqplot-event-canvas"
  // then i double click it
        $('#chart104 canvas.jqplot-event-canvas').dblclick();
    });

код >

Создание изображения после масштабирования В моем приложении мне нужно было создать несколько изображений из разных частей диаграммы, поэтому зум позволяет мне увеличивать эти части, а функция canvas to image позволяет мне сохранять текущие данные, отображаемые на холсте, после того, как я увеличил масштаб на точку. задача заключалась в том, как перезагрузить мою новую точку масштабирования как новое изображение для копирования     Устранение

  • Создайте свою кнопку для изображения Изображение
  • присоединить слушателя к событию jquery toggle, чтобы вы могли показать и скрыть изображение
  • Обрабатывайте изображение для управления событиями масштабирования, то есть когда я увеличиваю сгенерирование нового изображения, так что, когда я нажимаю, я вижу изображение увеличенной части, а не старое изображение всей диаграммы.

 $('#show_plotted_image_btn').toggle(
        function(){
            console.log('showing graph');
            // get the image
            function genImg(){
            var imgData = $('#chart104').jqplotToImageStr({});
       // given the div       id of your plot, get the img data
            var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
            $('#plotted_image_div').empty(); // remove the old graph
            $('#plotted_image_div').append(imgElem);
            };
            genImg();
            // show the image
            $('#plotted_image_div').css('display','block');

        },
        function(){
            // hide the image
            console.log('hiding graph');
            $('#plotted_image_div').css('display','none');
        }
    );

код >

* В моей реализации я только хотел показать последнее изображение, поэтому каждый раз, когда я прошу нового изображения, я избавляюсь от старого через $('# plotted_image_div'). empty();, который просто опорожняется старое изображение, а затем добавление нового. *

* Вот мой HTML для тех, кому может понадобиться дополнительная ясность *

<div id="chart104" class=""></div>

            <button id="show_plotted_image_btn" class="jqplot-image-button">View Plot Image</button>
            <span style="font-weight: bold; color:#FC2896;"> Double click on the Graph to Reset Zoom back to 100%</span>
            <button id="show_revert_graph_btn" class="jqplot-replot-button" title="Reset Zoom back to 100%">Revert the Graph</button>
            <div id="plotted_image_div" class="" style="display: none;"></div>

код > Удача

Ответ 4

Когда у вас возникли проблемы с выходом изображения, вы должны изменить jquery.jqplot.js. В некоторых браузерах script останавливается цикл infinte (Chrome и Firefox).

изменить этот код:

for (var i=0; i<wl; i++) {
    w += words[i];
    if (context.measureText(w).width > tagwidth) {
        breaks.push(i);
        w = '';
        i--;
    }   
}

:

for (var i=0; i<wl; i++) {
    w += words[i];
    if (context.measureText(w).width > tagwidth && w.length > words[i].length) {
        breaks.push(i);
        w = '';
        i--;
    }   
}

добавьте это в свой html:

<div id="chart"></div>
<div id="imgChart"></div>

и это для jquery после вашего jqplot-кода:

$(document).ready(function(){
    //after creating your plot do
    var imgData = $('#chart').jqplotToImageStr({}); // given the div id of your plot, get the img data
    var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
    $('#imgChart').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //
});

См. демонстрацию здесь

Ответ 5

Это решение сработало для меня. Простой и быстрый.

//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //

Я использую простые элементы 3.2 и, следовательно, не имею возможности использовать новую функцию, доступную в файлах