jchartfx将图表导出到图像

Question

我想将我的图表导出到我用http://www.jchartfx.com创建的图像中。我在链接- http://www.jchartfx.com/api/Chart/Export的文档中看到了导出函数，但示例如下

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

看起来是不正确的。有人能帮帮我吗。如何使用此导出函数将图表导出到图像。谢谢

Answer 1

据JChartFX人员说，使用导出函数是不可能轻易导出图表的-

“我们正在考虑这一点，不幸的是，在HTML5中做图表时，我们选择了SVG而不是画布。在画布中非常容易做到的事情之一是将图表导出为图像。在使用SVG时，它并不是那么简单(AFAIK)，所以我们正在努力研究如何在将来支持它。”

然而，有一些代码张贴在他们的论坛上，允许导出图表。然而，它并不简单，也不干净- http://community.jchartfx.com/forums/t/103.aspx。

Answer 2

画布具有使用SVG作为源绘制图像的能力。使用该特性和现代浏览器，您可以将任何jChartFX控件导出到图像中。无论是否使用css，都支持这一点。http://jsfiddle.net/h9DfR/上的一个小提琴手显示了这个功能。

    $(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();
        };
    });