在 Kendo-ui-angular2 图表中，当值为空或零时如何隐藏标签

Question

我有一个 kendo-angular-ui 图表，我正在折线图上显示每个点的标签。如果标签值为空或零，我不想在特定点上显示标签。仅当空或零时如何隐藏标签？

Answer 1

我意识到这已经很晚了，但您可以使用

kendo-chart-series-item-labels

元素上的 content 属性，并将其绑定到组件中检查标签的函数，然后根据您的条件返回空白标签。

HTML：

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item type="donut"
                             [data]="pieData"
                             categoryField="category"
                             field="value">
      <kendo-chart-series-item-labels [content]="labelContent"
                                      [visible]="true">
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

然后在你的组件中你的函数可以看起来像这样：

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

    return e.value;
  }

快速回顾一下：将

kendo-chart-series-item-labels

元素上的属性内容绑定到组件中的函数，该函数为要隐藏的标签返回空白值。

Answer 2

组件-

readonly barcodeText: BarcodeText = { visible: false, }

HTML

<ng-template #showBarCode>
    <kendo-barcode [type]="mode" [value]="'12345678901'" [text]="barcodeText"></kendo-barcode>
</ng-template>