JqPlot Как Изображение

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

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

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

11
jqplot jquery

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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ // append the img to the DOM

Скрипка здесь.

29

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

Мое Средство

  1. скрасят ваше $.варианты jqplot с

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

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

    Double click on the Graph to Reset Zoom back to 100% для целей юзабилити.

для тех, кто более склонен к кодированию, вот средство, оно включает в себя некоторые из кода, введенного Mark(спасибо Опять)

  1. создайте кнопку прямо под графиком, предоставьте ей атрибут id и прикрепите четный обработчик к его функции click,

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

  2. прикрепить прослушиватель событий и реализовать/зарегистрировать обработчик такой

Image Creation after zoom In my application i needed to create multiple images, out of different portions of the chart, so zoom allows me to magnify this parts, and the canvas to image functionality allows me to save the current data being shown in the canvas after i have zoomed in on a point. challenge was,how to reload my new zoom point as a new image for copying Remedy

  1. Create your button for plot Image
  2. attach a listener, to jquery's toggle event allow for you to show and hide the image
  3. Handle the image to manage the zoom events, i.e when i zoom in generate a new image, so that when i click i see the image of the zoomed-in part and not the old image of the whole chart 

 $('#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>

Удачи

3

похоже, они используют функцию Canvas для рендеринга изображения:

https://bitbucket.org/cleonello/jqplot/src/0d4d1a4fe522/src/jqplot.toImage.js

2

когда у вас возникли проблемы с выходом изображения, вы должны изменить jquery.jqplot.js. В некоторых браузерах скрипт останавливается на infinte loop (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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //
});

посмотреть демо здесь

2

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

//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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //

Я использую primefaces 3.2 и, следовательно, не имею возможности использовать новую функцию, доступную в primefaces

1