如何禁用 ApexCharts 上的下载选项？

2024-03-02 00:36:12

禁用 ApexCharts 上的下载选项：一个详细指南

介绍

ApexCharts 是一款功能强大的图表库，可用于在 web 应用程序中创建交互式图表。默认情况下，ApexCharts 显示一个工具栏，其中包含用于导出图表图像或数据的按钮。在某些情况下，您可能希望禁用该工具栏中的下载选项。本文将指导您如何通过简单的步骤执行此操作。

问题

在 ApexCharts 中禁用工具栏中的下载选项似乎是通过设置 toolbar: { show: false } 参数来实现的。但是，此方法无效。

解决方案

禁用下载选项的正确方法是设置 show: false 参数，而不是将其包裹在 toolbar 对象中。因此，您需要将代码修改为：

toolbar: {
  show: false
}

实施

更新您的 ApexCharts 配置以反映此更改。如果您使用 Vue.js，可以像下面这样在辅助函数中进行调整：

// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
  toolbar: { show: false }, // 禁用下载选项
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  // 其他图表选项...
});

然后，在您的 Vue 组件中，使用此更新后的函数来设置图表选项：

<template>
  <apexchart type="bar" height="500" :options="chartOptions" :series="series" />
</template>

<script>
import doOptions from "./do-chart-options";

export default {
  name: "chart-languages",
  data: _ => ({
    series: [{ data: [160, 110, 90, 85, 80, 80, 60, 30, 15, 14, 9] }],
    chartOptions: doOptions(labels)
  })
};
</script>