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 Documentation 时，我在 kendo-chart-x-axis-item-labels 中找到了 rotation 属性。我认为这可能是我的问题的解决方案。但是，我不知道如何在我的代码中使用它。有人可以帮我吗？

提前致谢！

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

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

Kendo UI angular - Rotate labels of x-axis in bar chart

kendo-chart

kendo-ui-angular2

angular