Full Graphic (javascript flot plugin) to image (png)

Question

Я использую плагин flot для javascript, чтобы нарисовать некоторые графики на веб-программном обеспечении, он отлично работает. Я могу построить графику, экспортировать данные в. xls, сохраните графическую фигуру как .png-файл (оба вы можете выбрать имя файла) В любом случае, это что-то вроде изображения ниже. How the plot shows in the web-site , но когда я нажимаю кнопку, чтобы сохранить его .png , изображение ниже .. How the plot shows in the downloaded file Мне нужно, чтобы загруженный файл включал номера осей (в примерах 0,10, ..., 100 и у-оси тоже) Как? Importants часть коды ниже (... для кода, который не нужен здесь):

function gerar_graficos(varArray, eixo_x, eixo_y) { 
... 
$.ajax({ 
    type: "POST", 
    url: '{% url "micro:micro_graficos_calc" %}', // micro.views.micro_graficos_calc 
    data: JSON.stringify({ 
     fibra:fibra, matriz:matriz, fibra_nome:fibra_nome, matriz_nome:matriz_nome, 
     abordagem:abordagem, varArray:varArray, eixo_x:eixo_x, eixo_y:eixo_y, vf:vf, sigma2:sig2 
    }), 
    success: function(response) { 

      var pan_buttons = $("#pan_buttons"); 
      var zoom_buttons = $("#zoom_buttons"); 
      var placeholder = $("#placeholder_grafico"); 
      var data = response.curvas; 

      var nome_eixo_x = $('#id_select_eixo_x').select2('data').text; 
      var nome_eixo_y = $('#id_select_eixo_y').select2('data').text; 
      ... 
      } 
      $("#flot-tooltip").hide(); 
      ... 
      var tick; 
      if($('#id_select_eixo_x').val() == 'angulo') 
       tick = [0, 30, 60, 90, 120, 150, 180] 
      else 
       tick = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] 
      var plot = $.plot(placeholder, data, { 
       xaxis: { 
        //axisLabel: $('#id_select_eixo_x').select2('data').text, 
        axisLabel: nome_eixo_x, 
        axisLabelUseCanvas: true, 
        axisLabelPadding: 5, 
        min: response.min_x, 
        max: response.max_x, 
        panRange: [response.min_x, response.max_x], 
        ticks: tick, 
       }, 
       yaxis: { 
        //axisLabel: $('#id_select_eixo_y').select2('data').text, 
        axisLabel: nome_eixo_y, 
        axisLabelUseCanvas: true, 
        axisLabelPadding: 5, 
        tickFormatter: tickFormatter_y, 
        min: response.min_y, 
        max: response.max_y, 
        panRange: [response.min_y, response.max_y], 
       }, 
       series: { 
        lines: { 
         show: true 
        }, 
        shadowSize: 0 
       }, 
       grid: { 
        clickable: true, 
       }, 
       legend: { 
        show: false, 
        //container: $('#legenda_grafico') 
       }, 
       zoom: { 
        interactive: true, 
       }, 
       pan: { 
        interactive: true 
       } 
      }); 
      ... 
     $('#salvarImagemGrafico').show(); 
     $("#ImagemGrafico").on("click", function(){ 
      var myCanvas = plot.getCanvas(); 
      dialogNomeImagem(myCanvas); 
     }); 
     ... 
function dialogNomeImagem(myCanvas){ 
bootbox.dialog( 'Digite o nome do arquivo(não necessário colocar .png no final): <br>\ 
     <form><input class = "input-block-level" id = "dialogIMG" type = "text"/>Padrão: imagem.png</form>', 
     [ 
      { 
       "label": "OK", 
       "class": "btn-primary primary", 
       "callback": function(){ 
         var MIME_TYPE = "image/png"; 
         var imgURL = myCanvas.toDataURL(MIME_TYPE); 
         var dlLink = document.createElement('a'); 
         var nome; 
         if(!$("#dialogIMG").val()) 
          nome = 'imagem'; 
         else 
          nome = $("#dialogIMG").val(); 
         dlLink.download = nome; 
         dlLink.href = imgURL; 
         dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':'); 
         document.body.appendChild(dlLink); 
         dlLink.click(); 
         document.body.removeChild(dlLink); 
         } 
      }, 
      { 
       "label": "Cancelar", 
       "class": "btn-primary", 
      } 
      ], 
      { 
       "header": "", 
       "onEspace": true, 
      }   ); 
} 

HTML:

<div id="divResultados"> 
    <div id='buttons_grafico'> 
     <span id='pan_buttons'> 
     </span> 
     <span id='zoom_buttons'> 
     </span> 
     <span id='flot-tooltip'> 
     </span> 
    </div> 
    <div id='placeholder_grafico'></div> 
    <div id='legenda_grafico'></div> 
    ... 
    <div id='salvarImagemGrafico'> 
     <input type="submit" id="ImagemGrafico" class="btn btn-primary" value="Salvar Imagem"> 
    </div> 
    ... 
</div> 

больших post..I знают, извини , но на самом деле надеюсь, что вы, ребята, можете мне помочь .. и да, я искал другие темы здесь и нашел некоторые, но моя проблема в том, что мне нужно продолжать менять имя файла, и ни один из кодов не работал что ..

Answer 1

Использование плагина jquery.flot.canvas.js вам нужно canvas: true в ваших вариантах. См. Это example и его источник на странице Flot.