javascript - 顶点图表文本 chop 自定义

Question

我正在制作 Apex 图表。当 categories 数组中有一个长文本项时，顶点图不会显示整个文本，而是通过执行 text-eclipse 并用三点显示它来显示其中的一部分，如下所示: 环境部...。

我们可以自定义它显示全文吗？如果文本无法放在同一行中，那么如果文本能够转到第一行下方的下一行，那就太好了。

这是代码

import React from "react";
import ReactApexChart from "react-apexcharts";

class ApexChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      series: [
        {
          name: "Progress",
          data: [64, 55, 21, 18, 76, 41, 44, 14, 66, 32]
        },
        {
          name: "Expenses (In thousound)",
          data: [53, 32, 42, 22, 29, 80, 16, 49, 78, 11]
        }
      ],

      options: {
        colors: ["#519ca5", "#2274A5"],
        plotOptions: {
          bar: {
            horizontal: true,
            dataLabels: {
              position: "top"
            }
          }
        },
        chart: {
          toolbar: {
            show: false,
          }
        },
        dataLabels: {
          enabled: true,
          offsetX: 0,
          style: {
            fontSize: "12px",
            colors: ["#fff"]
          }
        },
        stroke: {
          show: true,
          width: 1,
          colors: ["#fff"]
        },
        xaxis: {
          //   type: "datetime",
          categories: [
            "Department of Psychology",
            "Department of Natural Science",
            "Department of Environmental Science",
            "Department of Literature And Finance",
            "Department of Foreign Employement",
            "Department of Transport Management",
            "Department of culture media and sport",

          ]
        },
        legend: {
          position: "right",
          markers: {
            width: 24,
            height: 24,
            strokeWidth: 0,
            strokeColor: "#fff",
            fillColors: undefined,
            radius: 2,
            customHTML: undefined,
            onClick: undefined,
            offsetX: 0,
            offsetY: 0
          }
        }
      }
    };
  }

  componentDidMount() {
    fetch("http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly")
      .then(res => res.json())
      .then(res => console.log(res));
    this.setState({
      options: { ...this.state.options }
    });
  }

  render() {
    return (
      <div id="chart">
        <ReactApexChart
          height="100%"
          options={this.state.options}
          series={this.state.series}
          type="bar"
        />
      </div>
    );
  }
}

export default ApexChart;

这是demo

Answer 1

如果标签很长，则应以嵌套数组格式提供类别。数组中的每个项目都会成为一个新行。

xaxis: {
  categories: [
    ["Department", "of Psychology"],
    ["Department", "of Natural Science"],
    ["Department", "of Environmental Science"],
    ["Department", "of Literature And Finance"],
    ["Department", "of Foreign Employement"],
    ["Department", "of Transport Management"],
    ["Department", "of culture media"]
  ]
}

这是生成的 y 轴

已更新codesandbox示例

多行标签文档 - https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/