javascript - Apex 图表文本截断自定义

Question

我正在研究 Apex 图表。当数组中有一个长文本项时categories，顶点图表不会显示整个文本但是它通过执行 text-eclipse 并用三点显示它来显示它的一部分，如下所示Department of Environmenta...：

我们可以自定义它以显示整个文本吗？below the first line如果文本不适合在同一行中，它会转到下一行。

这是代码

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;

这是演示

标签： javascriptreactjsapexcharts

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 轴

更新的代码框示例

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