Charts IE11中Dojo图表到PDF的转换_Charts_Dojo_Jspdf_Html2canvas

Charts IE11中Dojo图表到PDF的转换

charts dojo

Charts IE11中Dojo图表到PDF的转换,charts,dojo,jspdf,html2canvas,Charts,Dojo,Jspdf,Html2canvas,我是DOJO图表的新手，在其中一个需求中，我们必须将DOJO图表转换为PDF 为了实现这一点，我们使用了“JSPDF”和“html2canvas”库它在Google Chrome中运行良好，而不是在IE11中请建议问候,，伯雷迪这是我的密码 PDF测试下载PDF 需要（[“dojox/charting/Chart”， “dojox/charting/plot2d/Lines”， “dojox/charting/axis2d/Default”， “dojox/charting/

我是DOJO图表的新手，在其中一个需求中，我们必须将DOJO图表转换为PDF

为了实现这一点，我们使用了“JSPDF”和“html2canvas”库

它在Google Chrome中运行良好，而不是在IE11中

请建议

问候,，伯雷迪

这是我的密码

PDF测试


下载PDF
需要（[“dojox/charting/Chart”，
“dojox/charting/plot2d/Lines”，
“dojox/charting/axis2d/Default”，
“dojox/charting/plot2d/StackedColumns”，
“dojox/charting/action2d/Tooltip”，
“dojo/ready”，
“dojox/charting/widget/SelectableLegend”、“dojox/gfx/utils”，
],
功能（图表、线条、默认值、堆叠列、工具提示、就绪、可选择图例、UTIL）{
var chart1=新图表（“chart1”）；
图表1.title=“堆叠图表”；
图表1.addPlot（“stackedColumnsPlot”{
类型：StackedColumns，
差距：6，
台词：对，
领域：没错，
马克：是的，
标签：对，
标签样式：“内部”，
紧张：“2”
});
图1.添加轴（“x”{
液滴标签：错误，
拉贝尔斯齐日琴：是的，
轮调：-20，
majorTicks:没错，
主要步骤：1，
米诺蒂克斯：错，
字体：“普通粗体12px塔荷马”，
fontColor:“黑色”，
标签：[{“值”：1，“文本”：“A”}，{“值”：2，“文本”：“B”}，{“值”：3，“文本”：“C”}，{“值”：4，“文本”：“D”}，{“值”：5，“文本”：“E”}，{“值”：6，“文本”：“F”}]
});
图1.添加轴（“y”{
标题：“成本”，
修洛：“少校”，
“少校”，
是的，
主要步骤：500，
最高：1500，
垂直：对
});
图1.添加系列（“AC”[300500500600300280]，
{
情节：“stackedColumnsPlot”，
笔划：{
颜色：“FFFFFF”，
},
填写：“FFEAE”
});
图1.添加系列（“电视”[244、301、699、620、820、837]{
情节：“stackedColumnsPlot”，
笔划：{
颜色：“FFFFFF”
},
填写：“FFEC94”
});
图1.addSeries（“ACCE”、[500100100100200250]{
情节：“stackedColumnsPlot”，
笔划：{
颜色：“FFFFFF”
},
填充：“B4D8E7”
});
图1.addSeries（“其他”[1001501007007000800300300]{
情节：“stackedColumnsPlot”，
笔划：{
颜色：“FFFFFF”
},
填写：“56BAEC”
});
图1.render（）；
新可选择图例({
图：图1，
对,，
对齐：顶部
}“图表1可选图例”）；
});
函数convertPDF（）{
var pdf=新的jsPDF（“l”、“pt”、“字母”）；
html2canvas（document.getElementById（'chart1'）{
//代理：“https://html2canvas.appspot.com/query",
//乌塞科尔斯：没错，
onrendered：函数（画布）{
var img=canvas.toDataURL（“image/jpeg”）；
pdf.addImage（画布，'JPEG'，15,15）；
pdf.save（'PDFTest.pdf'）；
}
});
}

这是一个工作示例，请记下代码中列出的重要内容，这些内容产生了差异

GFX渲染器：“画布”
htmlLabels:错

下面是工作代码以及工具提示功能

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
        <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">

        <script>
            dojoConfig = {
                parseOnLoad: true,      // enables declarative chart creation
                gfxRenderer: "canvas"   // canvas is first priority
            };
        </script>
        <script src="https://js.arcgis.com/3.16/"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
        <script src="html2canvas.js"></script>

        <script>
            function convertPDF() {
                var pdf = new jsPDF('l', 'pt', 'letter');
                html2canvas(document.getElementById('chart1'), {
                    onrendered: function (canvas) {
                        var img = canvas.toDataURL("image/png");
                        pdf.addImage(img, 'PNG', 15, 15);
                        pdf.save('PDFTest.pdf');
                    }
                });
            }
        </script>

        <script>
            require([
                "dojox/charting/Chart",
                "dojox/charting/plot2d/Lines",
                "dojox/charting/axis2d/Default",
                "dojox/charting/plot2d/StackedColumns",
                "dojox/charting/action2d/Tooltip",
                "dojox/charting/widget/SelectableLegend", 
                "dojox/gfx/utils",
                "dojo/ready",
                "dojo/domReady!"
            ], function (
                Chart, 
                Lines, 
                Default, 
                StackedColumns, 
                Tooltip, 
                SelectableLegend, 
                Utils,
                ready
            ) {
                var chart1 = new Chart("chart1");

                chart1.htmlLabels = false;
                chart1.title = "Stacked Chart";

                chart1.addPlot("stackedColumnsPlot", {
                   htmlLabels: false,
                   type: StackedColumns,
                   gap: 5,
                   lines: true,
                   areas: true,
                   markers: true,
                   labels: true,
                   labelOffset: -10,
                   labelStyle: "default",              
                   tension: "2"
                });

                chart1.addAxis("x", {
                   dropLabels: false,
                   labelSizeChange: true,
                   rotation: -20,
                   majorTicks: true,
                   majorTickStep: 1,
                   minorTicks: false,
                   font: "normal normal bold 12px Tahoma",
                   fontColor: "black",
                   labels: [
                       { "value": 1, "text": "A" }, 
                       { "value": 2, "text": "B" }, 
                       { "value": 3, "text": "C" }, 
                       { "value": 4, "text": "D" }, 
                       { "value": 5, "text": "E" }, 
                       { "value": 6, "text": "F" }
                   ]
                });

                chart1.addAxis("y", {
                   title: "Cost",
                   fixLower: "major",
                   fixUpper: "major",
                   includeZero: true,
                   majorTickStep: 500,
                   max: 1500,               
                   vertical: true
                });

                chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], {
                    plot: "stackedColumnsPlot",
                    stroke: {
                        color: "#FFFFFF"
                    },
                    fill: "#FFAEAE "
                });
                chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
                   plot: "stackedColumnsPlot",
                   stroke: {
                       color: "#FFFFFF"
                   },
                   fill: "#FFEC94"
                });
                chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
                   plot: "stackedColumnsPlot",
                   stroke: {
                       color: "#FFFFFF"
                   },
                   fill: "#B4D8E7"
                });
                chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 80], {
                   plot: "stackedColumnsPlot",
                   stroke: {
                       color: "#FFFFFF"
                   },
                   fill: "#56BAEC"
                });

                new Tooltip(chart1, "stackedColumnsPlot", {
                    text: function(chartItem) {
                        // console.debug(chartItem);
                        //return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " +   chartItem.y;
                        // return  "Comparision Rating: " + chartItem.y;
                       return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: "   + chartItem.y;
                    }
                });

                chart1.render();

                new SelectableLegend({
                   chart: chart1,
                   horizontal: true,
                   align: top
                }, "chart1SelectableLegend");          
           });
        </script>
    </head>
    <body class="claro">
        <div id="chart1" style="width: 600px; height: 400px;"></div>

        <div id="chart1SelectableLegend"></div>

        <button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
    </body>
</html>


dojoConfig={
parseOnLoad:true，//启用声明性图表创建
gfxRenderer：“画布”//canvas是第一优先级
};
函数convertPDF（）{
var pdf=新的jsPDF（“l”、“pt”、“字母”）；
html2canvas（document.getElementById（'chart1'）{
onrendered：函数（画布）{
var img=canvas.toDataURL（“image/png”）；
pdf.addImage（img，'PNG'，15,15）；
pdf.save（'PDFTest.pdf'）；
}
});
}
要求([
“dojox/charting/Chart”，
“dojox/charting/plot2d/Lines”，
“dojox/charting/axis2d/Default”，
“dojox/charting/plot2d/StackedColumns”，
“dojox/charting/action2d/Tooltip”，
“dojox/charting/widget/SelectableLegend”，
“dojox/gfx/utils”，
“dojo/ready”，
“dojo/domReady！”
]，功能(
图表，
线，
违约
堆叠的列，
工具提示，
可选择图例，
乌提尔，
准备好的
) {
var chart1=新图表（“chart1”）；
图表1.htmlLabels=假；
图表1.title=“堆叠图表”；
图表1.addPlot（“stackedColumnsPlot”{
htmlLabels:错，
类型：StackedColumns，
差距：5，
台词：对，
领域：没错，
马克：是的，
标签：对，
标签偏移：-10，
标签样式：“默认”，
紧张：“2”
});
图1.添加轴（“x”{
液滴标签：错误，
拉贝尔斯齐日琴：是的，
轮调：-20，
majorTicks:没错，
主要步骤：1，
米诺蒂克斯：错，
字体：“普通粗体12px塔荷马”，
方科尔
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
        <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">

        <script>
            dojoConfig = {
                parseOnLoad: true,      // enables declarative chart creation
                gfxRenderer: "canvas"   // canvas is first priority
            };
        </script>
        <script src="https://js.arcgis.com/3.16/"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
        <script src="html2canvas.js"></script>

        <script>
            function convertPDF() {
                var pdf = new jsPDF('l', 'pt', 'letter');
                html2canvas(document.getElementById('chart1'), {
                    onrendered: function (canvas) {
                        var img = canvas.toDataURL("image/png");
                        pdf.addImage(img, 'PNG', 15, 15);
                        pdf.save('PDFTest.pdf');
                    }
                });
            }
        </script>

        <script>
            require([
                "dojox/charting/Chart",
                "dojox/charting/plot2d/Lines",
                "dojox/charting/axis2d/Default",
                "dojox/charting/plot2d/StackedColumns",
                "dojox/charting/action2d/Tooltip",
                "dojox/charting/widget/SelectableLegend", 
                "dojox/gfx/utils",
                "dojo/ready",
                "dojo/domReady!"
            ], function (
                Chart, 
                Lines, 
                Default, 
                StackedColumns, 
                Tooltip, 
                SelectableLegend, 
                Utils,
                ready
            ) {
                var chart1 = new Chart("chart1");

                chart1.htmlLabels = false;
                chart1.title = "Stacked Chart";

                chart1.addPlot("stackedColumnsPlot", {
                   htmlLabels: false,
                   type: StackedColumns,
                   gap: 5,
                   lines: true,
                   areas: true,
                   markers: true,
                   labels: true,
                   labelOffset: -10,
                   labelStyle: "default",              
                   tension: "2"
                });

                chart1.addAxis("x", {
                   dropLabels: false,
                   labelSizeChange: true,
                   rotation: -20,
                   majorTicks: true,
                   majorTickStep: 1,
                   minorTicks: false,
                   font: "normal normal bold 12px Tahoma",
                   fontColor: "black",
                   labels: [
                       { "value": 1, "text": "A" }, 
                       { "value": 2, "text": "B" }, 
                       { "value": 3, "text": "C" }, 
                       { "value": 4, "text": "D" }, 
                       { "value": 5, "text": "E" }, 
                       { "value": 6, "text": "F" }
                   ]
                });

                chart1.addAxis("y", {
                   title: "Cost",
                   fixLower: "major",
                   fixUpper: "major",
                   includeZero: true,
                   majorTickStep: 500,
                   max: 1500,               
                   vertical: true
                });

                chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], {
                    plot: "stackedColumnsPlot",
                    stroke: {
                        color: "#FFFFFF"
                    },
                    fill: "#FFAEAE "
                });
                chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
                   plot: "stackedColumnsPlot",
                   stroke: {
                       color: "#FFFFFF"
                   },
                   fill: "#FFEC94"
                });
                chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
                   plot: "stackedColumnsPlot",
                   stroke: {
                       color: "#FFFFFF"
                   },
                   fill: "#B4D8E7"
                });
                chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 80], {
                   plot: "stackedColumnsPlot",
                   stroke: {
                       color: "#FFFFFF"
                   },
                   fill: "#56BAEC"
                });

                new Tooltip(chart1, "stackedColumnsPlot", {
                    text: function(chartItem) {
                        // console.debug(chartItem);
                        //return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " +   chartItem.y;
                        // return  "Comparision Rating: " + chartItem.y;
                       return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: "   + chartItem.y;
                    }
                });

                chart1.render();

                new SelectableLegend({
                   chart: chart1,
                   horizontal: true,
                   align: top
                }, "chart1SelectableLegend");          
           });
        </script>
    </head>
    <body class="claro">
        <div id="chart1" style="width: 600px; height: 400px;"></div>

        <div id="chart1SelectableLegend"></div>

        <button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
    </body>
</html>