React中的apexchart方法

Question

我正在使用 apexcharts 并做出反应。我需要隐藏一系列，但我不知道如何在我的代码中实现这些方法。这个想法是使用 data4 进行一些计算并将其显示在自定义工具提示上。如何隐藏图表中的数据4但仍在后台使用数据？

我的代码是这样的

import Chart from 'react-apexcharts'
import React from 'react';

class ApexChart1 extends React.Component {
 constructor(props) {
   super(props);
   
   this.state = {
          series: [{
            name: 'Data1',
            data: this.props.data.map(d=>{return +d.data1})
          }, {
            name: 'data2',
            data: this.props.data.map(d=>{return +d.data2})
          }, {
            name: 'data3',
            data: this.props.data.map(d=>{return +d.data3})
          }, {
            name: 'data4',
            data: this.props.data.map(d=>{return +d.data3})
          }],
    options:
     {...,
      tooltip: {
              // console.log()
              custom: function({series, seriesIndex, dataPointIndex, w}) {

                // Here I want to use the data4 series but hide that data when the chart renders
                  
              }
            }
     }
   }


   render() {
      return (
     <div>
            <Chart options={this.state.options} series={this.state.series} type="bar" height={425} />
     </div>
   )}
 }
}

感谢您的帮助

Answer 1

我不确定我是否理解你的想法，但如果你想在你的函数中访问 data4 使用：

tooltip: {
     // console.log()
     custom: function({series, seriesIndex, dataPointIndex, w}) {
                let data4 = this.props.data.map(d=>{return +d.data3})
                // something to do with data4
             }
 }

如果您想隐藏图表中的 data4，只需将其从系列中删除，这样您的系列将如下所示：

series: [{
        name: 'Data1',
        data: this.props.data.map(d=>{return +d.data1})
      }, {
        name: 'data2',
        data: this.props.data.map(d=>{return +d.data2})
      }, {
        name: 'data3',
        data: this.props.data.map(d=>{return +d.data3})
      }]