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

Question

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

Answer 1

在添加图表的 div 中添加了一个新按钮，并为其添加了一个 onclick 操作，它将调用函数 toggle series

<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;
  }

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

Toggle all data series upon clicking a legend in Apex charts

javascript

frontend

typescript

reactjs

apexcharts