React项目中如何修改Apex Donut Chart环形图的图例标签

问题原因 #

你的配置存在两处不符合react-apexcharts规范的问题：

• react-apexcharts的Chart组件不存在chartOptions属性，所有配置项都需要统一放在options对象中传递，你单独定义的chartOptions字段无法被组件读取
• 环形图的分类标签labels属于顶层配置项，需要直接写在options对象内，不能单独拆分存放

具体修改步骤 #

1. 将labels: ['Open', 'Handled', 'Pending']挪到options配置对象中
2. 删除state中多余的chartOptions字段，同时删除Chart组件上的chartOptions属性
3. 可选优化：移除代码中无效的const data=[] = Response.data.ticket写法，修正为const data = Response.data.ticket即可

修正后完整代码 #

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'
        },
        // 直接在options里定义labels
        labels: ['Open', 'Handled', 'Pending']
      },
      series: [10,20,30]
    }
  }
  async componentDidMount(){
    let Pending=0; let Open=0; let Handled=0;
    await axios.get('http://localhost:5000/tickets').then (Response=>{
     console.log("Response" , Response.data.ticket);
     // 修正原来的错误赋值写法
     const data = Response.data.ticket;
      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({
        // 环形图不需要x轴配置，保留原有options即可
        series:[Open,Handled,Pending]
      })
    })
    .catch(err =>{
      console.log("error", err)
    })
  }
 
  render(){
  return(
        <center>
    <div>
      Apex
      <Chart options={this.state.options} series={this.state.series} type="donut" width={1000} height={520} />
    </div>
    </center>
  );
  }
};

额外配置说明 #

如果需要调整图例的显示位置、样式，可以在options中新增legend配置项，示例如下：

options: {
  labels: ['Open', 'Handled', 'Pending'],
  legend: {
    position: 'bottom', // 可选top/right/left
    fontSize: '14px'
  }
}

内容的提问来源于stack exchange，提问作者Mystica