如何为kendo-chart-category-axis-item-labels设置文本值

问题描述 投票：1回答：2

我想在图表的开头显示图表类别轴标签，因为我正在使用AxisLabelsPosition。它在开始时显示，但也显示在x轴上。

我不想在x轴上显示。有什么方法可以实现这一目标。

这是我的plunker：https://plnkr.co/edit/SSMONz3yuRndAxNOKu0K?p=preview这是在剑道官方网站上给出的相同代码示例

/app.component.同时/

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 (&deg;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();
}

/ ** weather-data.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;
  }
);
angular kendo-ui kendo-ui-angular2 kendo-chart
2个回答
1
投票

应该可以避免使用第二个轴重复标题：

<kendo-chart-category-axis>
    <kendo-chart-category-axis-item >
        <kendo-chart-category-axis-item-labels rotation="auto" [position]="categoryLabelsPosition">
        </kendo-chart-category-axis-item-labels>
    </kendo-chart-category-axis-item>
    <kendo-chart-category-axis-item [title]="{text:'testing'}" [line]="{ visible: false }" name="titleAxis">
    </kendo-chart-category-axis-item>
</kendo-chart-category-axis>

<kendo-chart-value-axis>
    <kendo-chart-value-axis-item  [axisCrossingValue]="[0, -1000]">
        <kendo-chart-value-axis-item-labels [position]="valueLabelsPosition">
        </kendo-chart-value-axis-item-labels>
    </kendo-chart-value-axis-item>
</kendo-chart-value-axis>

https://plnkr.co/edit/BnhR4EdzMjzmmduviMxV?p=preview

我也会将此报告为错误。在这两个地方显示的标题对我来说似乎不对。

0
投票

标题是单行文本。只需编辑此行即可设置表格标题：

  <kendo-chart>
    <kendo-chart-title text="Title" position="bottom"></kendo-chart-title>
  </kendo-chart>

通过设置position，您可以决定文本的呈现位置。

每个图表项重复标签。删除/设置每个数据项的标签（轴项标签）：

  <kendo-chart>
    <kendo-chart-series>
      <kendo-chart-series-item type="column" [data]="data" field="TMax">
      </kendo-chart-series-item>
    </kendo-chart-series>
  </kendo-chart>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.