时间戳

首页 > 解决方案 > 使用 react-chartjs-2 ，如何使用下载按钮将我的图表保存为 png

reactjs - 使用 react-chartjs-2 ，如何使用下载按钮将我的图表保存为 png

问题描述

我正在尝试使用 Onclick 按钮将我的 chart.js 图表下载为 png，但我不知道我将如何实现这一点，我已经完成了这个答案React-chartjs-2 Donut chart export to png但是这对我来说还不是很清楚，因为我是 chart.js 的新手，不知道如何将这些变量与我的按钮连接起来。

import React from 'react';
import { Component, useRef } from 'react';
import { Bar } from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';

const data = {
  labels: ['Finance & Business', 'Mining', 'Community Services', 'Electricity', 'Agriculture', 'Construction', 'Manufacture', "Trade & Tourism", "Transport & Logistics"],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: ["#3283FC", "", "", "#00C0C8", "#C0BD00", "#3A46B1", "#00A150", "#FEB200", "#9302a1"],
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [0.6, 0.0, 0.0, -0.1, -0.1, -0.3, -0.3, -0.6, -1.0],
    }
  ]
};


class StackedBar extends Component {

  render() {

    return (
      <div>
        <h2>Bar Example (custom size)</h2>
        <Bar

          data={data}
          options={{
            plugins: {
              datalabels: {
                display: true,
                color: '#fff'
              }
            },
            title: {
              display: true,
              text: 'Contribution Percentage',
              position: 'left'
            },
            maintainAspectRatio: true,
            scales: {
              xAxes: [{

                stacked: true,
                gridLines: {
                  borderDash: [2, 6],
                  color: "black"
                },
                scales: {
                }
              }],
              yAxes: [{
                ticks: {
                  beginAtZero: true,
                  steps: 0.5,
                  stepSize: 0.5,
                  max: 1.5,
                  min: -1.0

                },
              }]

            },

          }}
        />
      </div>
    );
  }
}
export default StackedBar;

标签： reactjschart.jschart.js2react-chartjs-2

解决方案

所以我安装了一个名为 FileSave.js 的插件 //

  1. npm 安装 npm i file-saver
  2. 导入插件 import { saveAs } from 'file-saver';
  3. 不仅仅是写这个 blob 函数
   class StackedBar extends Component {
   saveCanvas() {
       //save to png
       const canvasSave = document.getElementById('stackD');
       canvasSave.toBlob(function (blob) {
           saveAs(blob, "testing.png")
       })
   }

   render() {

       return (
           <div>
               <a onClick={this.saveCanvas}>Download as PNG</a>
      
               <Bar id="stackD" data={data} options={options} />
           </div>
       );
   }
}
export default StackedBar;

推荐阅读