将chartjs图表转换为base64

oxcyiej7 于 2023-08-05 发布在 Chart.js

关注(0)|答案(1)|浏览(210)

我已经写了一个图表HTML代码使用chartjs这是工作良好这里是代码

const months = [1,2,3]
const ndvi_data = [3,4,5]
const evi_data = [6,7,8,9]
new Chart(document.getElementById("ndvi_evi_chart"), {
  type: 'bar',
  data: {
    labels: months,
    datasets: [{
      label: "NDVI",
      type: "bar",
      stack: "Base",
      backgroundColor: "#6418C3",
      data: ndvi_data,
    }, {
      label: "EVI",
      type: "bar",
      stack: "Sensitivity",
      backgroundColor: "#B270ED",
      data: evi_data,
    }]
  },

  options: {
  plugins: {
          legend: {
            display: true,
            position: "top",
            align: "end"
          }
        },

    scales: {
      xAxes: [{
        //stacked: true,
        stacked: true,
        ticks: {
          beginAtZero: true,
          maxRotation: 0,
          minRotation: 0
        }
      }],
      yAxes: [{
        stacked: true,
        scaleLabel: {
        display: true,
        labelString: 'NDVI and EVI'
      },
      }]
    },
  }
});

.chartNdvi{
        width: 500px;
        padding: 20px;
        background: white;
        }

<div class="chartNdvi" style="border:1px solid #A9A9A9">
                        <p style="font-weight: bold; font-size:15px;">Crop Health</p>
                        <p style="font-size:10px;">NDVI and EVI (Six Month Historical Data)</p>
                        <canvas id="ndvi_evi_chart" width="200" height="80"></canvas>
                      </div>
                        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>

现在的问题是，当我试图保存这个HTML文件，其中包含了大量的图表到一个PDF文件的图表是不可见的PDF文件
问题是我如何将那些ChartJS图表显示成PDF文件
我将其转换为PDF的代码

import pdfkit

# converting html file to pdf file
pdfkit.from_file('144474.html', 'output1.pdf')

型

chart.js

来源：https://stackoverflow.com/questions/76659580/converting-the-chartjs-charts-into-base64

1条答案

按热度按时间

mzsu5hc01#

我认为一个好的方法是将画布转换为图像（toDataURL()），然后继续进行。
使用css媒体查询（@media screen / @media print）你可以控制外观。（在片段中注解掉）

const months = [1, 2, 3]
const ndvi_data = [3, 4, 5]
const evi_data = [6, 7, 8, 9]
new Chart(document.getElementById("ndvi_evi_chart"), {
  type: 'bar',
  data: {
    labels: months,
    datasets: [{
      label: "NDVI",
      type: "bar",
      stack: "Base",
      backgroundColor: "#6418C3",
      data: ndvi_data,
    }, {
      label: "EVI",
      type: "bar",
      stack: "Sensitivity",
      backgroundColor: "#B270ED",
      data: evi_data,
    }]
  },

  options: {
    plugins: {
      legend: {
        display: true,
        position: "top",
        align: "end"
      }
    },

    scales: {
      xAxes: [{
        //stacked: true,
        stacked: true,
        ticks: {
          beginAtZero: true,
          maxRotation: 0,
          minRotation: 0
        }
      }],
      yAxes: [{
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'NDVI and EVI'
        },
      }]
    },

    animation: {
      onComplete: function() {
        const img = document.getElementById('ndvi_evi_chart').toDataURL('image/png')
        document.getElementById('canvas-as-image').innerHTML = '<img src="' + img + '">'
      }
    }

  },

});

.chartNdvi {
  width: 500px;
  padding: 20px;
  background: white;
}

/*
@media screen {
  #ndvi_evi_chart {
    display: block;
  }
  #canvas-as-image {
    display: none;
  }
}

@media print {
  #ndvi_evi_chart {
    display: none;
  }
  #canvas-as-image {
    display: block;
  }
}
*/

<div class="chartNdvi" style="border:1px solid #A9A9A9">
  <p style="font-weight: bold; font-size:15px;">Crop Health</p>
  <p style="font-size:10px;">NDVI and EVI (Six Month Historical Data)</p>
  <canvas id="ndvi_evi_chart" width="200" height="80"></canvas>
  <div id="canvas-as-image"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>

赞(0）回复(0）举报 2023-08-05

我来回答

将chartjs图表转换为base64

1条答案

相关问题

热门标签

最新问答