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

jchartfx将图表导出到图像

2 个答案: