Kendo UI angular - 在条形图中旋转 x 轴的标签

Posted 2023-05-09

【中文标题】Kendo UI angular - 在条形图中旋转 x 轴的标签

【英文标题】：Kendo UI angular - Rotate labels of x-axis in bar chart

【发布时间】：2018-12-31 20:28:42

【问题描述】：

我正在尝试在较小的屏幕中旋转 x 轴的标签，以确保标签不会相互重叠。

代码

<kendo-chart *ngIf="!yearLoader" (seriesClick)="barClick($event)">
      <kendo-chart-tooltip format="0 events"></kendo-chart-tooltip>

       <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [categories]="yearChartData.months">
            </kendo-chart-category-axis-item>
       </kendo-chart-category-axis>

       <kendo-chart-series>
            <kendo-chart-series-item [spacing]="1" [data]="yearChartData.count" type="column"></kendo-chart-series-item>
       </kendo-chart-series>
</kendo-chart>

当我浏览API Documentation 时，我在kendo-chart-x-axis-item-labels 中找到了rotation 属性。我认为这可能是我的问题的解决方案。但是，我不知道如何在我的代码中使用它。谁能帮帮我？

提前致谢！

【参考方案1】：

您可以通过在kendo-chart-category-axis-item 组件中嵌套kendo-chart-category-axis-item-labels 组件来旋转x 轴或（类别轴）的标签。 (Example)

<kendo-chart *ngIf="!yearLoader" (seriesClick)="barClick($event)">
    ...

    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="yearChartData.months">

            <kendo-chart-category-axis-item-labels [rotation]="45">
            </kendo-chart-category-axis-item-labels>

        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>

    ...
</kendo-chart>

如果您想旋转所有标签（x 和 y 轴），请使用 kendo-chart-axis-defaults-labels 组件并将其嵌套在 kendo-chart 组件中。

<kendo-chart *ngIf="!yearLoader" (seriesClick)="barClick($event)">

    <kendo-chart-axis-defaults-labels [rotation]="45">
    </kendo-chart-axis-defaults-labels>

    ...
</kendo-chart>

【讨论】：

如何使用majorGridLines组件