reactjs - Apexchart Ajax json 渲染

Question

我正在显示条形图（Apexchart），当用户更改日期选择器时间线时需要不断更新。

当输入值更改但图表渲染在渲染之前显示错误时，我正在调用 axios 调用以更新图表数据（系列数据）。

这是图表代码

import React, { Component } from "react";
import ApexCharts from 'apexcharts';
import ReactApexChart from "react-apexcharts";
import  { converse_number, conv_numb_without_decimal } from '../../../utils/number-formatter';

export default class TicketChart extends Component {
constructor(props) {
  super(props);
  
  let names=this.props.names;
  let mayaVal=this.props.mayaVal;
  let controlVal=this.props.controlVal
  
  this.state = {
    series: [{
      data:mayaVal
    }, {
      data: controlVal
    }],
    options: {
      chart: {
        type: 'bar',
        height: 430,
      
        events:{
          click: (event, chartContext, config)=> {
              this.props.handleUvBarClick && this.props.handleUvBarClick(config.globals.categoryLabels[config.dataPointIndex]);
          }
        },
        toolbar: {
            autoSelected: "pan",
            show: true,
            tools: {
                download: false,
                selection: false,
                zoom: true,
                zoomin: true,
                zoomout: true,
                pan: true,
                reset: false ,
                customIcons: [{
                    icon: '<img src="/cus_icon_control.svg" width="55">',
                    index: 1,
                    title: 'Control',
                    class: 'custom-control-icon'
                  },
                  {
                    icon: '<img src="/cus_icon_maya.svg" width="50" >',
                    index: 2,
                    title: 'Maya',
                    class: 'custom-maya-icon'
                }]
                }
          },
        selection: {
            enabled: true
        },
      },
      noData: {
        text: 'No Data Available...'
      },
      states: {
        normal: {
            filter: {
                type: 'none',
                value: 0,
            }
        },
        hover: {
            filter: {
                type: 'darken',
                value: 1,
            }
        },
        active: {
            filter: {
                type: 'darken',
                value: 1,
            }
        },
    },
      plotOptions: {
        bar: {
          horizontal: false,
          distributed:false,
          columnWidth: '95%',
          position:"top",
          dataLabels: {
            position: 'top',
          },
        }
      },
      legend:{
          show:false
      },
      dataLabels: {
        enabled: true,
        offsetX: 0,
        offsetY:-20,
        
        style: {
          fontSize: '12px',
          colors: ['#1C2C42']
        },
        formatter:  (value, { seriesIndex, dataPointIndex, w })=> {
          if(this.props.isPerc){
            return value+"%";
          }
          return value;
        }
      },
      // yaxis: { crosshairs: { show: true, width: 1, position: 'back', opacity: 0.9, stroke: { color: '#ff0000', width: 1, dashArray: 5, }, } },
      grid: {
        show: true,
        borderColor: 'rgba(38, 38, 38, 0.1)',
        strokeDashArray:[5],
        position: 'back',
          xaxis: {
            lines: {
                show: true,
                stroke: { color: 'rgba(38, 38, 38, 0.1)', width: 1, dashArray: 5, }
            }
          },   
          yaxis: {
            lines: {
                show: true
            },
            tickAount:6,
            axisTicks: {
              show: true,
              borderType: 'solid',
              color: '#78909C',
              // width: 6,
              offsetX: 0,
              offsetY: 0
            }
          }
        },
        colors:this.props.colors,
        stroke: {
          show: true,
          curve: 'smooth',
          lineCap: 'butt',
          colors: ['transparent'],
          width: 4,
          dashArray: 0,      
        },
        tooltip: {
          shared: true,
          intersect: false,
        
            custom: ({series, seriesIndex, dataPointIndex, w}) =>{
              return ('<div class="lin_tool text-center" key={"linedata"+index}>'+
              '<h5 class="blk_lin">'+"ID : "+w.globals.categoryLabels[dataPointIndex]+'</h5>'+
              '<div key={"data"+index} class="tool_bar d-flex justify-content-between align-items-center">'+
              '<div class="d-flex flex-column align-items-center bor-right p-10"> '+
              '<div>'+'<p class="tool_col">'+conv_numb_without_decimal(series[0][dataPointIndex])+(this.props.isPerc?"%":"")+'</p>'+'</div>'+
              '<div class="tool_val"> '+"Maya" +'</p>'+'</div>'+
              
              ' </div>'+
              '<div class="d-flex flex-column align-items-center p-10"> '+
              '<div>'+'<p class="tool_col">'+conv_numb_without_decimal(series[1][dataPointIndex])+(this.props.isPerc?"%":"")+'</p>'+'</div>'+
              '<div class="tool_val"> '+"Control"+'</div>'+
              '</div>'+'</div>'+'</div>'
              )}
            },
            xaxis: {
              type:'category',
          //    categories: names,
              tickPlacement:'on'
            }     
    }, 
  };
}

UNSAFE_componentWillReceiveProps (nextProps) {
  let seriesArr = [],namesData;
  seriesArr.push({data:nextProps.mayaVal})
  seriesArr.push({data:nextProps.controlVal})

//  namesData = nextProps.names;
  
  this.setState({
    series: seriesArr
  });

  // ApexCharts.exec('mychart', 'updateOptions', {
  //   xaxis: {
  //     categories: namesData
  //   }
  // }, false, true);
  ApexCharts.exec('mychart', 'updateSeries', seriesArr , true);
}

render() {  
  return (  
    <>
      <div id="mychart">
        <ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={430} />
      </div>
    </>
    )
  }
}

我在其中呈现此图表的组件

**API call**
random_name = () => {
    try {
      this.showLoader();
      APIendpoint
      ).then(
        (res) => {
          this.hideLoader();
          if (res.status === 200) {
            return res.json().then((res) => {
              this.setState({
                chartData: res
              });
            });
          }
        }
      ).catch((error) => {
        console.log(error);
      });
    } catch (error) {
      console.log(error);
    }
  };

render() {
  let { chartData, ticketDropdownVal, } = this.state;

  let names=[],controlVal=[],mayaVal=[];
    if(chartData && chartData.summary) {
    chartData.summary.map(val=>{
   //   names.push(val.campaign_id);

    if (ticketDropdownVal === "Overall Spends"){
        if(!isNaN(val.control_spends)) {
          controlVal.push({
            "x": val.campaign_id,
            "y": val.control_spends
          })
        } else {
          controlVal.push('0')
        }
        if(!isNaN(val.test_spends)){
          mayaVal.push({
            "x": val.campaign_id,
            "y": val.test_spends
          })
        } else {
          mayaVal.push('0')
        }
    } else if(ticketDropdownVal === "Overall Response Rate"){
        if(!isNaN(val.response_rate_control)) {
          controlVal.push({
            "x": val.campaign_id,
            "y": val.response_rate_control
          })
        } else {
          controlVal.push('0')
        }
        if(!isNaN(val.response_rate_test)){
          mayaVal.push({
            "x": val.campaign_id,
            "y": val.response_rate_test
          })
        } else {
          mayaVal.push('0')
        }
    }
  })}

return (
  <>
           {controlVal.length > 0 &&
              <TicketChart
                names={names}
                mayaVal={mayaVal}
                controlVal={controlVal}
                handleUvBarClick={this.handleUvBarClick}
                colors={["#FFE2EC","#D5F0FF"]}
                isStacked={false}
                page="ticketSize"
                isPerc={ticketDropdownVal==="Overall Response Rate"?true:false}
              />
            }

我得到的 错误

标签： reactjschartsapexcharts