代码之家 › 专栏 › 技术社区 › Shreenil Patel

KidoUI角旋转条形图中X轴的标签

kendo-chart kendo-ui-angular2 angular

Shreenil Patel · 技术社区 · 6 年前

我试图在较小的屏幕上旋转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 我发现 rotation 财产 kendo-chart-x-axis-item-labels . 我想那可以解决我的问题。但是,我不知道如何在代码中使用它。有人能帮我吗?

提前谢谢!

1 回复 | 直到 6 年前

blue 5 年前

您可以旋转十轴或(类别轴)嵌套 kendo-chart-category-axis-item-labels 中的组件 kendo-chart-category-axis-item 组件 ( 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>

如果要旋转所有标签( 十和是的轴)使用 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>

推荐文章

ANS · 403安装剑道角度按钮时禁止出现错误

7 年前

Wald Specht · 剑道UI角度网格数格式

7 年前

Anand · 单选按钮ngModelChange未启动

7 年前

Jörg Bergner · 尝试使用kendo upload和Angular 5上载文件时出错

7 年前

CodeMan03 · KendoUI对话框服务更改标题颜色

7 年前

dev_in_progress · TabStrips中的剑道角度形式验证

7 年前

Davide De Santis · KendoUI和Angular2自动完成:限制值

7 年前

junsung kang · KendoUI Angular2我可以安装所有组件吗?

7 年前

coderman · 角度-剑道网格列-绑定html数据

7 年前

Makla · 角度可重用模板

7 年前