reactjs - 如何重命名 Apex 圆环图标签

Question

我是 React 的初学者。我正在尝试获取数据库中打开、处理和待定票证的数量。因此，我使用了 Axios 并从数据库中获取数据，我从中计算打开、待处理和已处理票证的数量。这些基于圆环图的值。我正在尝试将 donut 聊天图例标签重命名为“打开”、“已处理”和“待定”，但它没有被重命名。我得到的输出是: 即仅显示“系列 1、系列 2、系列 3”等默认名称。如何重命名图例标签如上。

import React, {Component} from "react";
import GridWrapper from "../helpers/gridWrapper";
import Chart from 'react-apexcharts'
import ContentWrapper from "../helpers/contentWrapper";
import GridWrapperL from "../helpers/twoSideBySideWrapper/gridWrapperL";
import axios from "axios";


export default class Charts extends Component{
 


  constructor(props) {
    super(props);

    this.state = {
      options: {
        chart: {
          id: 'apexchart-example'
        },
      },
      series: [10,20,30]
    }
  }
  async componentDidMount(){
    const salary=[]; const age=[]; var Pending=0; var Open=0; var Handled=0;
    await axios.get('http://localhost:5000/tickets').then (Response=>{
     console.log("Response" , Response.data.ticket);
     const data=[] = Response.data.ticket;
     const emp_name=[];
     const OpenArr=[] , HandleArr=[] , PendingArr=[];
      data.forEach(element => {
  
         
        if(element.ticketStatus == "Pending"){
         
          Pending = Pending+1;
        }
        if(element.ticketStatus=="Open"){
          Open =Open+1;
        }

        if(element.ticketStatus =="Handled"){
          Handled=Handled+1;
        }
      });
     
   
      this.setState({
        options: {
          chart: {
            id: 'apexchart-example'
          },
          xaxis:{
            categories:emp_name
          },
      
        },

      series:[Open,Handled,Pending],
      chartOptions: {
        labels: ['Open', 'Handled', 'Pending']
      }
      
      })
    })
    .catch(err =>{
      console.log("error", err)
    })

  }
 
  render(){
  return(
 
        <center>
    <div>
      Apex
      {/* We can change the type by simply typing "line" */}
      <Chart options={this.state.options} series={this.state.series} chartOptions={this.state.chartOptions} type="donut" width={1000} height={520} />
    </div>
    </center>
 
  );
  }
};

Answer 1

在选项中只需简单地添加属性 labels: ['A', 'B', 'C']。顺序在这里很重要。