单击 Apex 图表中的图例时切换所有数据系列答案

【问题标题】：Toggle all data series upon clicking a legend in Apex charts单击 Apex 图表中的图例时切换所有数据系列
【发布时间】：2021-09-09 05:56:03
【问题描述】：

在下面的图表中，假设有第四个图例说“全部”，当我点击它时，所有数据都应该消失。当我再次单击它时，所有数据必须重新出现。有没有办法在顶点图表中做到这一点？

【问题讨论】：

标签： javascript reactjs typescript frontend apexcharts

【解决方案1】：

在添加图表的 div 中添加了一个新按钮，并为其添加了一个 onclick 操作，该操作将调用函数切换系列

<div className={"chart-item " + className} key={index}>
  <Chart series={option.series} options={option} height={600} />
  <div className="all-lines">
    <input
      className="button-css"
      type="button"
      value={toggleText[index]}
      onClick={(e) => {
        toggleSeries(option?.chart?.id, option?.series, e);
      }}
    />
  </div>
</div>

切换系列功能将根据图表的当前状态隐藏或显示所有图例。

function toggleSeries(
      id: string | undefined,
      series: ApexAxisChartSeries | ApexNonAxisChartSeries | undefined,
      e: any
    ) {
      const functionName =
        e.target.value === hideText ? "hideSeries" : "showSeries";
      e.target.value = e.target.value === hideText ? showText : hideText;
      const chartSeries: ApexAxisChartSeries | undefined = series
        ? (series as ApexAxisChartSeries)
        : undefined;
      const chartId = id ? id : "";

      chartSeries?.forEach((ser) => {
        ApexCharts.exec(chartId, functionName, ser.name);
      });
    }

    return lineChartItems;
  }

【讨论】：