在剑道图表 Angular 中隐藏 y 轴

Question

在此示例中，我想完全隐藏 y 轴值（25、20、15、5、0）： Stackblitz to play with: https://stackblitz.com/edit/angular-kendo-chart-m5fx9p?file =app%2Fapp.component.ts

我试图将[labels]设置为 return ''并设置visible: false但仍然没有运气。

分享代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="['normal', 'smooth']" [(ngModel)]="style">
    </kendo-dropdownlist>
        <kendo-dropdownlist [(ngModel)]="secondaryList">
    </kendo-dropdownlist>    
    <kendo-chart>
    <kendo-chart-axis-defaults [line]="{visible: false}" 
    [labels]="labels" 
    [majorTicks]="majorTicks"
    [minorTicks]="minorTicks" 
    [labels]="test" [majorGridLines]="{ visible : false}">
    </kendo-chart-axis-defaults>
      <kendo-chart-series>
        <kendo-chart-series-item [style]="style" type="scatterLine"
            [data]="data"
            [markers]="{ visible: false }">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `,
})
export class AppComponent implements OnInit {
  public style: string = 'normal';

  public test() {
    return '';
  }
  public labelContent(e: any): string {
    if (e.value === 0) {
      return '';
    }

    return e.value;
  }
  public data: any[] = [
    [0, 20],
    [1, 1],
    [2, 18],
    [3, 3],
    [4, 15],
    [5, 5],
    [6, 10],
    [7, 6],
    [8, 9],
    [9, 6],
    [10, 10],
    [11, 5],
    [12, 13],
    [13, 3],
    [14, 16],
    [15, 1],
    [16, 19],
    [17, 1],
    [18, 20],
    [19, 2],
    [20, 18],
    [21, 5],
    [22, 12],
    [23, 7],
    [24, 10],
    [25, 8],
  ];
  public secondaryList: Array<any> = [
    { text: 'value1', value: 'value2' },
    { text: 'value2', value: 'value2' },
  ];
  ngOnInit() {
    if (this.style === 'normal') {
      this.secondaryList = [
        { text: 'value1', value: 'value2' },
        { text: 'value2', value: 'value2' },
        { text: 'value3', value: 'value3' },
        { text: 'value4', value: 'value4' },

        { text: 'value5', value: 'value5' },
      ];
    }
    if (this.style === 'smooth') {
      this.secondaryList = [{ text: 'value5', value: 'value5' }];
    }
  }
}

Answer 1

根据您的要求，html 选择器是 kendo kendo-chart-y-axis > kendo kendo-chart-y-axis-item请检查以下两个堆栈闪电！

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="['normal', 'smooth']" [(ngModel)]="style">
    </kendo-dropdownlist>
        <kendo-dropdownlist [(ngModel)]="secondaryList">
    </kendo-dropdownlist>

    
    <kendo-chart>
    <kendo-chart-y-axis>
      <kendo-chart-y-axis-item [visible]="false">
      </kendo-chart-y-axis-item>
    </kendo-chart-y-axis>
    <kendo-chart-axis-defaults [line]="{visible: false}" 
    [labels]="labels" 
    [majorTicks]="majorTicks"
    [minorTicks]="minorTicks" 
    [labels]="test" [majorGridLines]="{ visible : false}">
    </kendo-chart-axis-defaults>
      <kendo-chart-series>
        <kendo-chart-series-item [style]="style" type="scatterLine"
            [data]="data"
            [markers]="{ visible: false }">

            <kendo-chart-series-item-labels [content]="labelContent"
                                      [visible]="true"></kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `,
})
export class AppComponent implements OnInit {
  public style: string = 'normal';

  public test() {
    return '';
  }
  public labelContent(e: any): string {
    if (e.value === 0) {
      return '';
    }

    return e.value;
  }
  public data: any[] = [
    [0, 20],
    [1, 1],
    [2, 18],
    [3, 3],
    [4, 15],
    [5, 5],
    [6, 10],
    [7, 6],
    [8, 9],
    [9, 6],
    [10, 10],
    [11, 5],
    [12, 13],
    [13, 3],
    [14, 16],
    [15, 1],
    [16, 19],
    [17, 1],
    [18, 20],
    [19, 2],
    [20, 18],
    [21, 5],
    [22, 12],
    [23, 7],
    [24, 10],
    [25, 8],
  ];
  public secondaryList: Array<any> = [
    { text: 'value1', value: 'value2' },
    { text: 'value2', value: 'value2' },
  ];
  ngOnInit() {
    if (this.style === 'normal') {
      this.secondaryList = [
        { text: 'value1', value: 'value2' },
        { text: 'value2', value: 'value2' },
        { text: 'value3', value: 'value3' },
        { text: 'value4', value: 'value4' },

        { text: 'value5', value: 'value5' },
      ];
    }
    if (this.style === 'smooth') {
      this.secondaryList = [{ text: 'value5', value: 'value5' }];
    }
  }
}

分叉的堆栈闪电战

分叉的堆栈闪电战