JavaScript ApexCharts 到 Base64 图像

简介

ApexCharts 是一个基于 JavaScript 的开源图表库，可以生成多种类型的互动式图表，包括面积图、柱状图和饼图等。将 ApexCharts 输出转换为 Base64 图像，可以方便地将图表嵌入到 web 应用程序或电子邮件中。

实现步骤

准备工作

在使用 ApexCharts 之前，需要先引入相关的 JavaScript 和 CSS 文件。可以在 ApexCharts 的官网上下载最新版本的文件，也可以使用 CDN 引入。

以下是引入 ApexCharts 的示例代码：

<!-- 在 head 标签中引入 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.27.1/dist/apexcharts.min.css" />

<!-- 在 body 标签底部引入 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.1/dist/apexcharts.min.js"></script>

创建图表

使用 ApexCharts 创建图表的步骤如下：

1. 准备数据：将要在图表中显示的数据存储为一个数组，如以下示例代码：

   const chartData = {
     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
     series: [
       {
         name: "Sales",
         data: [30, 40, 25, 50, 49, 21, 70, 51, 42, 69, 91, 15],
       },
       {
         name: "Expenses",
         data: [20, 10, 15, 30, 29, 41, 60, 31, 22, 49, 71, 35],
       },
     ],
   };
   

2. 创建配置对象：为图表设置各种选项，如颜色、字体等等。可以参考 ApexCharts 的官方文档来设置选项，或者查看示例代码：

   const chartOptions = {
     chart: {
       height: 350,
       type: "line",
       zoom: {
         enabled: true,
       },
     },
     colors: ["#546E7A", "#E91E63"],
     dataLabels: {
       enabled: true,
     },
     stroke: {
       curve: "smooth",
     },
     xaxis: {
       categories: chartData.labels,
     },
   };
   

3. 使用 new ApexCharts 创建图表，并传入数据和配置对象。以下是示例代码：

   const chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
   chart.render();
   

最后，页面上会显示一个带有图表的画布。如果需要生成 Base64 图像，则需要使用 Canvas API 将画布转换为 Base64 格式。

生成 Base64 图像

在 JavaScript 中，可以使用 Canvas API 的 toDataURL 方法将画布转换为 Base64 格式。以下是示例代码：

const chartCanvas = document.querySelector("#chart canvas");
const chartDataUrl = chartCanvas.toDataURL("image/png");

console.log(chartDataUrl);

这里， chartCanvas 是上一步中创建的带有图表的画布元素。 toDataURL 方法会将画布转换为 image/png 格式的 Base64 字符串，并将其存储到 chartDataUrl 变量中。

至此，已经成功地将 ApexCharts 输出转换为 Base64 图像。

总结

通过以上步骤，我们可以将使用 ApexCharts 创建的图表转换成 Base64 格式的图像，并将其嵌入到 web 应用程序或电子邮件中。这是非常方便的方式，可以在一定程度上增强应用程序的可视性和用户体验。