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

Question

我试图在较小的屏幕中旋转 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 文档时，我rotation在kendo-chart-x-axis-item-labels. 我认为这可能是我问题的解决方案。但是，我不知道如何在我的代码中使用它。有人可以帮我吗？

提前致谢！

Answer 1

您可以通过在组件内嵌套组件来旋转x轴或（类别轴）的标签。（示例）kendo-chart-category-axis-item-labelskendo-chart-category-axis-item

<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>