Apex диаграмму текста усечь настроить - PullRequest
Новая
       57

Apex диаграмму текста усечь настроить

1 голос
/ 28 января 2020

Я работаю над графиком Apex. Когда в массиве categories имеется длинный текстовый элемент, на диаграмме апекса не отображается весь текст, но он показывает некоторую его часть, выполняя text-eclipse и показывая его с тремя точками, например: Department of Environmenta....

Можем ли мы настроить его, показывая весь текст? Было бы хорошо, если бы текст был go к следующей строке 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;

А вот демо

1 Ответ

1 голос
/ 28 января 2020

Если у вас длинные метки, вы должны предоставить категории в формате вложенного массива. Каждый элемент в массиве становится новой строкой. 

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 enter image description here

Обновлено codesandbox пример

Документы для многострочных этикеток - https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/

...