export - jchartfx 将图表导出到图像

Question

我想将我的图表导出到我使用http://www.jchartfx.com创建的图像。我在链接的文档中遇到了导出功能 - http://www.jchartfx.com/api/Chart/Export但示例为

chart1.export, "\\temp\\image.bmp"));

看起来不正确。谁能帮我解决这个问题。如何使用此导出功能将图表导出到图像。谢谢

Answer 1

根据 JChartFX 家伙的说法，使用导出功能无法轻松导出图表 -

“我们正在考虑它，不幸的是，在 HTML5 中制作图表时，我们选择了 SVG 而不是 Canvas。在 Canvas 中很容易做到的事情之一就是将图表导出为图像。当它不那么简单 (AFAIK) 时使用 SVG，所以我们正试图弄清楚未来如何支持它。”

但是，在他们的论坛上发布了一些代码，允许导出图表。但是，这并不简单，也不是干净的方式 - http://community.jchartfx.com/forums/t/103.aspx

Answer 2

Canvas 能够使用 SVG 作为源来绘制图像。使用该功能和现代浏览器，您可以将任何 jChartFX 控件导出到图像。无论是否使用 css 都支持这一点。http://jsfiddle.net/h9DfR/上的 jsfiddle显示了此功能。

    $(document).ready(function(){
        var chart = new cfx.Chart();
        // Configure the chart here
        chart.setGallery(cfx.Gallery.Bar);
        //
        chart.create("currentChart");       
    });

    $("#save").on("click", function () {
        // Obtain the chart's div  tag
        var html1 = $("svg.jchartfx").parent().html();
        // Filter the SVG tag only
        var html = html1.substring(html1.indexOf("<svg"));
        // Since CSS is used, a reference to the external css must be added to the SVG. This is not needed if CSS is not used
        html = "<?xml-stylesheet href=\"http://www.jchartfx.com/libs/v7/current/styles/Attributes/jchartfx.attributes.css\" type=\"text/css\"?>" + html;
        html = "<?xml-stylesheet href=\"http://www.jchartfx.com/libs/v7/current/styles/Palettes/jchartfx.palette.css\" type=\"text/css\"?>" + html;

        var canvas = document.querySelector("canvas");
        context = canvas.getContext("2d");
        var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
        var image = new Image;
        image.src = imgsrc;
        // This function creates the PNG and saves it to disk
        image.onload = function() {
            context.drawImage(image, 0, 0); 
            var canvasdata = canvas.toDataURL("image/png"); 
            var a = document.createElement("a");
            a.download = "sample.png";
            a.href = canvasdata;
            a.click();
        };
    });