How to export C3 js multi chart as Png?

Viewed 12

C3 Chart

I'm using c3 to draw a multi chart. but I'm having trouble exporting! I've read a few articles to solve this problem, but it's hard to understand.

How can I fix it to export?

When I click Export button, execute blow code.

const exportSvg = function () {
        
        const svg = document.querySelector('svg');
        console.log('svg!!!', svg);
        
        const { x, y, width, height } = svg.viewBox.baseVal;

        
        /*const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });*/
        const blob = new Blob([svg.outerHTML], { type: 'image/png' });
        const url = URL.createObjectURL(blob);
        const image = document.createElement('img');
        image.src = url;
        image.addEventListener('load', function () {
            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const context = canvas.getContext('2d');
            context.drawImage(image, x, y, width, height);
            const link = canvas.toDataURL();
            URL.revokeObjectURL(url);
        });

        downloadSvg('test.png', url)
    }

 const downloadSvg = function (name, dataUriString) {
        console.log('dataUriString', dataUriString);
        let link = document.createElement('a');
        link.addEventListener('click', function () {
            link.href = dataUriString;
            link.download = name;
            document.body.removeChild(link);
        }, false);
        document.body.appendChild(link);
        link.click();
    }
0 Answers
Related