Question

我使用jot的flot插件在网络软件上绘制一些图形，它工作得很好。我可以绘制图形，将数据导出到.xls文件，将图形图像保存为。 png文件（两者都可以选择文件的名称）无论如何，它的情节如下图所示。 How the plot shows in the web-site 但是当我点击按钮将其保存到.png时，图像就在下方.. How the plot shows in the downloaded file 我需要下载的文件包含轴编号（例如0,10，...，100和y轴）如何？代码的重要部分如下（...代表这里不需要的代码）：

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>

大帖子......我知道，对不起，但是真的希望你们能帮助我...... 是的，我在这里寻找其他主题并找到了一些，但我的问题是我需要不断更改文件的名称，而且没有任何代码适用于此...

Answer 1

使用Credit = 0插件，您需要jquery.flot.canvas.js选项。请在“Flot”页面上查看此example及其来源。

完整图形（javascript flot插件）到图像（png）

1 个答案: