Question

我目前正在开发一个带有C＃代码的Asp.net网站，它试图通过javascript以编程方式在打印机上打印Dygraphs图表。当我试图打印包含Dygraphs的DIV时，我只能打印图表的x和y轴;没有图表出现在纸上。

后来，我发现了一篇关于StackOverflow（Print Dygraph chart）的文章，其中有人试图做同样的事情，他们收到的建议是尝试使用Dygraph.export.asPNG函数中内置的Dygraphs，包含在dygraphs-extra.js文件，用于在将Dygraph打印到打印机上之前将其转换为PNG图像。我也试过这个，而我能打印出来的只是一个代表Dygraph的小方形图标。我不确定我做错了什么。这是我的代码：

var graph = null;
var row1 = null;
var options = {
            labels: row1,
            labelsDivStyles: {
                        'text-align': 'center',
                        'background': 'white',
                        'font-size': '12px',
                        'color': 'black
                    },  //labelsDivStyles
            'colors': ['red', 'orange', 'green', 'blue'],
            labelsSeperateLines: true,
            labelsDiv: "labels",
            legend: 'always',
            title: 'Temperature vs. Time',
            titleHeight: 18,
            ylabel: 'Temperature (c)',
            xlabel: 'Time',
            axes: {
                x:{
                    axisLabelFontSize: 12,
                    axisLabelColor: 'black',
                    axisLineColor: 'black',
                    gridLineWidth: 2,
                    drawGrid: true,
                    drawAxis: true
                },//x
                y:{
                    axisLabelFontSize: 12,
                    axisLabelColor: 'black',
                    axisLineColor: 'black',
                    gridLineWidth: 2,
                    drawGrid: true,
                    drawAxis: true,
                    independentTicks: true
                }//y
            }//axes


        };

var drawGraph = function(data){
    var arry = toArray(data);
    var firstRow = arr[0];
    row1 = firstRow;
    var data = arry.slice(1); //Remove first element (labels);
    var img = document.getElementById(“DygraphDiv”);
    return new Dygraph(img, data, options);

}


function graphTemps(){

    var stringData = FetchDataFromDatabase();
    graph = drawGraph(stringData);
}

function printGraph(){
    //Create the image 
    var img = document.getElementById(“DygraphDiv”);
    Dygraph.export.asPNG(graph, img, options); 

    //Print the Dygraph image on a printer
    var printWindow = window.open('', '', 'height=300,width=600');
    printWindow.document.write('<html><head><title>Graph DIV Contents</title>');
    printWindow.document.write('<head><body>');
    printWindow.document.write("<img src=" + img + ">");
    printWindow.document.write('</body></html>');
    printWindow.doucment.close();

}

以编程方式通过Javascript将Dygraphs打印到打印机

0 个答案: