如何在 kendo 图表的顶部而不是底部显示 x 轴值

Question

我想在 angular 2

的 kendo 图表中移动范围条形图顶部的 x 轴

sample chart

我正在使用https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-bar/

Answer 1

在<kendo-chart-category-axis-item>里面添加<kendo-chart-category-axis-item-labels>。然后将位置设置为end。位置参数值必须是 AxisLabelsPosition 类型。所以从 @progress/kendo-angular-charts 包中导入它。

例如：

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

public position: AxisLabelsPosition = "end";

标签旋转也会受到位置设置的影响。要正确旋转标签，请从 kendo-chart-category-axis-item 中删除 [labels]="{ rotation: 'auto' } 并在 kendo-chart-category-axis-item-labels.

中设置 [rotation]

Refer this example。