jchartfx将图表导出到图像

Question

I want to export my chart to an image which i have created using http://www.jchartfx.com . I came across the export function in its documentation from the link - http://www.jchartfx.com/api/Chart/Export but the example as

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

looks to be incorrect . Can anyone please help me with this . How can i export a chart to an image using this export function . Thank you

Answer 1

According to JChartFX guys it is not possible easily export charts using export function -

"We are considering it, unfortunately when doing charts in HTML5 we chose SVG over Canvas. One of the things that would be very easy to do in Canvas would be to export the chart as an image. It is not as simple (AFAIK) when using SVG so we are trying to figure out how to support this in the future."

However there is some code posted on their forums that allows to export charts. However, it is not simple, or clean way - http://community.jchartfx.com/forums/t/103.aspx

Answer 2

Canvas has the ability to draw an image using SVG as source. Using that feature and a modern browser, you can export any jChartFX control to an image. This is supported with or without using css. A jsfiddle at http://jsfiddle.net/h9DfR/ shows this functionality.

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