angular - 如何为 kendo-chart-category-axis-item-labels 设置文本值
问题描述
我想在图表的开头显示图表类别轴标签,因为我正在使用 AxisLabelsPosition 。它在开始时显示,但也显示在 x 轴上。
我不想在 x 轴上显示。我们有什么办法可以做到这一点。
这是我的 plunker:https ://plnkr.co/edit/SSMONz3yuRndAxNOKu0K?p=preview 这是剑道官方网站上给出的相同代码示例
/app.component.ts/ _ _
import { Component } from '@angular/core';
import { AxisLabelsPosition } from '@progress/kendo-angular-charts';
import { mockData } from './weather-data';
@Component({
selector: 'my-app',
styles: [ '.k-radio-label { margin: 10px 1em 10px 0; }' ],
template: `
<div class="example-config">
<div class="col-sm example-col">
<h6>Category axis - Label position</h6>
<input id="catOnAxis" type="radio" name="cat" class="k-radio"
value="onAxis" [(ngModel)]="categoryLabelsPosition" />
<label for="catOnAxis" class="k-radio-label">On Axis</label>
<input id="catStart" type="radio" name="cat" class="k-radio"
value="start" [(ngModel)]="categoryLabelsPosition" />
<label for="catStart" class="k-radio-label">Start</label>
<input id="catEnd" type="radio" name="cat" class="k-radio"
value="end" [(ngModel)]="categoryLabelsPosition" />
<label for="catEnd" class="k-radio-label">End</label>
</div>
<div class="col-sm example-col">
<h6>Value axis - Label position</h6>
<input id="valOnAxis" type="radio" name="val" class="k-radio"
value="onAxis" [(ngModel)]="valueLabelsPosition" />
<label for="valOnAxis" class="k-radio-label">On Axis</label>
<input id="valStart" type="radio" name="val" class="k-radio"
value="start" [(ngModel)]="valueLabelsPosition" />
<label for="valStart" class="k-radio-label">Start</label>
<input id="valEnd" type="radio" name="val" class="k-radio"
value="end" [(ngModel)]="valueLabelsPosition" />
<label for="valEnd" class="k-radio-label">End</label>
</div>
</div>
<kendo-chart>
<kendo-chart-series>
<kendo-chart-title text="Daily Max (°C)"></kendo-chart-title>
<kendo-chart-series-item type="column" [data]="data"
field="TMax" categoryField="Date">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [title]="{text:'testing'}">
<kendo-chart-category-axis-item-labels [position]="categoryLabelsPosition">
</kendo-chart-category-axis-item-labels>
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item>
<kendo-chart-value-axis-item-labels [position]="valueLabelsPosition">
</kendo-chart-value-axis-item-labels>
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
</kendo-chart>
`
})
export class AppComponent {
public categoryLabelsPosition: AxisLabelsPosition = 'start';
public valueLabelsPosition: AxisLabelsPosition = 'onAxis';
public data: any[] = mockData();
}
/** 天气数据.ts **/
const data = (): any[] =>
[
{
Timestamp: '2018-01-01T00:00:00.000',
TMax: 3.3,
TMin: -12,
Wind: 5.5,
Rain: 0
},
{
Timestamp: '2018-01-02T00:00:00.000',
TMax: 5.2,
TMin: -115550,
Wind: 8.1,
Rain: 0
},
{
Timestamp: '2018-01-03T00:00:00.000',
TMax: 3.2,
TMin: -8,
Wind: 8.1,
Rain: 0
},
{
Timestamp: '2018-01-04T00:00:00.000',
TMax: 11,
TMin: -7,
Wind: 24.5,
Rain: 0
},
{
Timestamp: '2018-01-05T00:00:00.000',
TMax: 9,
TMin: 0,
Wind: 21.7,
Rain: 1.8
},
{
Timestamp: '2018-01-06T00:00:00.000',
TMax: 2,
TMin: -1,
Wind: 21.7,
Rain: 19.7
},
{
Timestamp: '2018-01-07T00:00:00.000',
TMax: 2,
TMin: -3,
Wind: 24.5,
Rain: 1.3
},
{
Timestamp: '2018-01-08T00:00:00.000',
TMax: 3,
TMin: -2,
Wind: 16.4,
Rain: 0.8
},
{
Timestamp: '2018-01-09T00:00:00.000',
TMax: 3,
TMin: -7,
Wind: 13.6,
Rain: 0.3
},
{
Timestamp: '2018-01-10T00:00:00.000',
TMax: 2.2,
TMin: -8,
Wind: 13.6,
Rain: 0
},
{
Timestamp: '2018-01-11T00:00:00.000',
TMax: 4,
TMin: -6,
Wind: 16.4,
Rain: 0
},
{
Timestamp: '2018-01-12T00:00:00.000',
TMax: 5.5,
TMin: -6,
Wind: 21.7,
Rain: 0
},
{
Timestamp: '2018-01-13T00:00:00.000',
TMax: 2.7,
TMin: -2,
Wind: 27.1,
Rain: 0
},
{
Timestamp: '2018-01-14T00:00:00.000',
TMax: 0,
TMin: -6,
Wind: 24.5,
Rain: 0
},
{
Timestamp: '2018-01-15T00:00:00.000',
TMax: -1,
TMin: -6,
Wind: 27.1,
Rain: 0
},
{
Timestamp: '2018-01-16T00:00:00.000',
TMax: 0,
TMin: -7,
Wind: 24.5,
Rain: 0
},
{
Timestamp: '2018-01-17T00:00:00.000',
TMax: 1,
TMin: -7,
Wind: 21.7,
Rain: 0
},
{
Timestamp: '2018-01-18T00:00:00.000',
TMax: 5,
TMin: -6,
Wind: 13.6,
Rain: 0
},
{
Timestamp: '2018-01-19T00:00:00.000',
TMax: 6,
TMin: -3,
Wind: 13.6,
Rain: 0
},
{
Timestamp: '2018-01-20T00:00:00.000',
TMax: 3,
TMin: -3,
Wind: 29.9,
Rain: 7.2
},
{
Timestamp: '2018-01-21T00:00:00.000',
TMax: 2.2,
TMin: -7,
Wind: 19,
Rain: 1.5
},
{
Timestamp: '2018-01-22T00:00:00.000',
TMax: 6.2,
TMin: -8,
Wind: 8.1,
Rain: 0.3
},
{
Timestamp: '2018-01-23T00:00:00.000',
TMax: 6,
TMin: -2,
Wind: 16.4,
Rain: 0
},
{
Timestamp: '2018-01-24T00:00:00.000',
TMax: 2.4,
TMin: -2,
Wind: 16.4,
Rain: 5.1
},
{
Timestamp: '2018-01-25T00:00:00.000',
TMax: -1.4,
TMin: -9,
Wind: 16.4,
Rain: 17.2
},
{
Timestamp: '2018-01-26T00:00:00.000',
TMax: 0,
TMin: -8,
Wind: 10.9,
Rain: 5.9
},
{
Timestamp: '2018-01-27T00:00:00.000',
TMax: -2.7,
TMin: -9,
Wind: 16.4,
Rain: 0
},
{
Timestamp: '2018-01-28T00:00:00.000',
TMax: -2.4,
TMin: -14,
Wind: 19,
Rain: 0
},
{
Timestamp: '2018-01-29T00:00:00.000',
TMax: -5,
TMin: -20,
Wind: 13.6,
Rain: 0
},
{
Timestamp: '2018-01-30T00:00:00.000',
TMax: -5.4,
TMin: -22,
Wind: 5.5,
Rain: 0
}
];
export const mockData = () =>
data().map(p => {
p.Date = new Date(p.Timestamp);
//alert(p.Date)
return p;
}
);
解决方案
解决方案由剑道团队提供。
我将此作为错误提出并在 kendo-angular-charts v 3.3.2 中修复
https://github.com/telerik/kendo-angular/issues/1700
请按照链接。
谢谢
推荐阅读
- windows - Inno Setup:如何更改卸载背景颜色
- docker - 如何在 gitlab 管道中转发 .gitlab-ci ssh-add 命令?
- scala - Spark(scala)数据框 - 检查列中的字符串是否存在于另一个数据框的列中
- javascript - 如果折扣有效,lodash 按 discountPrice 排序数组
- java - 在 Google Dataproc Spark 中链接原生 .so
- python - Pandas 从列表中设置 dtype
- c++ - 是否可以将通用 lambda 作为非模板参数传递
- c++ - 如何使用 gdb 调试 g++ 分段错误?
- python - 处理列名中的括号
- python - Seaborn 图在 ipython 单元格中显示乱序