如何更改Amcharts版本5中的Yaxis字体尺寸？ （VUE JS 3）

Question

这是我的代码：

我添加了此代码段。但不幸的是，没有变化

 {
    category: "javad",
    direction: "rtl",
    align: "right",
    fontSize: 50,
    textAlign: "right",
  },

输出：

如您所见，“ javad ”一词未完全显示类别（yaxis）部分！

Answer 1

添加此代码完全解决了问题：

    yAxis.get("renderer").labels.template.setAll({
      oversizedBehavior: "wrap",
      textAlign: "center",
      maxWidth: 150,
    });

Answer 2

我所有的代码是：

<template>
  <div class="hello" ref="chartdiv"></div>
</template>

<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

export default {
  name: "HelloWorld",
  mounted() {
    let root = am5.Root.new(this.$refs.chartdiv);

    root.setThemes([am5themes_Animated.new(root)]);

    let chart = root.container.children.push(
      am5xy.XYChart.new(root, {
        panY: false,
        layout: root.verticalLayout,
      })
    );

    var colors = chart.get("colors");

    let data = [
      {
        category: "a1",
        fromDate: "1401-01-01 08:00",
        toDate: "1401-01-01 10:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(0), 0),
        },
      },
      {
        category: "a1",
        fromDate: "1401-01-01 12:00",
        toDate: "1401-01-01 15:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(0), 0.4),
        },
      },
      {
        category: "a1",
        fromDate: "1401-01-01 15:30",
        toDate: "1401-01-01 21:30",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(0), 0.8),
        },
      },
      {
        category: "a1",
        fromDate: "1401-01-01 09:00",
        toDate: "1401-01-01 12:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(2), 0),
        },
      },
      {
        category: "a1",
        fromDate: "1401-01-01 13:00",
        toDate: "1401-01-01 17:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(2), 0.4),
        },
      },
      {
        category: "a1",
        fromDate: "1401-01-01 11:00",
        toDate: "1401-01-01 16:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(4), 0.3),
        },
      },
      {
        category: "a2",
        fromDate: "1401-01-01 16:00",
        toDate: "1401-01-01 19:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(3), 0.4),
        },
      },
      {
        category: "a3",
        fromDate: "1401-01-01 16:00",
        toDate: "1401-01-01 20:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(5), 0),
        },
      },
      {
        category: "a4",
        fromDate: "1401-01-01 20:30",
        toDate: "1401-01-02 00:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(6), 0.6),
        },
      },
      {
        category: "javad",
        fromDate: "1401-01-01 13:00",
        toDate: "1401-01-02 00:00",
        columnSettings: {
          fill: am5.Color.brighten(colors.getIndex(8), 0.7),
        },
      },
    ];
    chart.set("direction", "rtl");

    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
    var yAxis = chart.yAxes.push(
      am5xy.CategoryAxis.new(root, {
        categoryField: "category",
        // height: 200,
        fontSize: 50,
        renderer: am5xy.AxisRendererY.new(root, { inversed: true }),
        // align: "right",
        textAlign: "right",
        tooltip: am5.Tooltip.new(root, {
          themeTags: ["axis"],
          textAlign: "right",

          animationDuration: 200,
        }),
      })
    );

    yAxis.data.setAll([
      { category: "a1", direction: "rtl", align: "right" },
      { category: "a2", direction: "rtl", align: "right" },
      { category: "a3", direction: "rtl", align: "right" },
      { category: "a4", direction: "rtl", align: "right" },
      {
        category: "javad",
        direction: "rtl",
        align: "right",
        fontSize: 50,
        textAlign: "right",
      },
    ]);

    var xAxis = chart.xAxes.push(
      am5xy.DateAxis.new(root, {
        baseInterval: { timeUnit: "minute", count: 1 },
        renderer: am5xy.AxisRendererX.new(root, {}),
      })
    );

    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/

    var series = chart.series.push(
      am5xy.ColumnSeries.new(root, {
        xAxis: xAxis,
        yAxis: yAxis,
        openValueXField: "fromDate",
        valueXField: "toDate",
        categoryYField: "category",
        sequencedInterpolation: true,
      })
    );

    series.columns.template.setAll({
      templateField: "columnSettings",
      strokeOpacity: 0,
      // direction: "rtl",
      // width: 5,
      align: "right",
      tooltipText:
        "{category}: {openValueX.formatDate('yyyy/MM/dd HH:mm')} - {valueX.formatDate('yyyy/MM/dd HH:mm')}",
    });

    series.data.processor = am5.DataProcessor.new(root, {
      dateFields: ["fromDate", "toDate"],
      dateFormat: "yyyy/MM/dd HH:mm",
    });
    series.data.setAll(data);

    // Add scrollbars
    chart.set(
      "scrollbarX",
      am5.Scrollbar.new(root, {
        orientation: "horizontal",
      })
    );

    // Make stuff animate on load
    // https://www.amcharts.com/docs/v5/concepts/animations/
    series.appear();
    chart.appear(1000, 100);
  },

  beforeDestroy() {
    if (this.root) {
      this.root.dispose();
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 90%;
  height: 500px;
}
</style>