反应的顶图法

Question

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

我的代码是这样的

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})
      }]

Answer 2

要访问文档方法，必须创建一个实例，如下所示：

// import 

import Chart from 'react-apexcharts' 
import ApexCharts from 'apexcharts'

// options relevants for chart: 

const options = {
chart: {
    id: 'chartBarSeries',-> give a id
    type: 'bar',
    /* ...etc */
}

// in render method

<Chart
    options={varOptions}
    series={varSeries}
    type="line"
    height={'auto'}
/>

// in a effect or button function 

const chart = ApexCharts.getChartByID('chartBarSeries')
                chart.hideSeries('your series name')-> or another method