如何在使用 js 在顶点图表中加载数据之前将图例放在图表底部？

如何解决如何在使用 js 在顶点图表中加载数据之前将图例放在图表底部？

我尝试在加载数据之前将图例标题及其颜色代码放在图表底部。 这是我试过的代码。请让我知道要进行的更正。

   var options = {
        series: [],chart: {
          height: 350,type: 'line',toolbar: {
            show: true
          },zoom: {
            enabled: false,}
        },legend: {
          show:true,position: 'bottom',floating: true,verticalAlign: 'bottom',align:'center'
        },tooltip: {
          shared: true
        },colors: ['#77B6EA','#545454'],dataLabels: {
          enabled: true
        },

这是显示的图像

解决方法

问题的关键是：如果您不提供任何数据，ApexCharts 如何知道在图例中显示什么。

假设您知道系列将被称为什么，即使您没有数据，您仍然可以提供空系列：

series: [
  {
    name: "Series 1",data: []
  }
]

如果您只有一个系列，您还需要将 showForSingleSeries 的值从默认的 false 更改为 true：

legend: {
  showForSingleSeries: true
}

---

附带说明，您还可以删除 show 和 position 图例属性，因为它们与默认值相同。您可能还想删除 verticalAlign 和 align 属性，因为它们未包含在 documentation 中。