如何隐藏已隐藏Kendo Angular图表的提示框？

这个问题我之前也碰到过，核心原因很简单：[hidden]只是通过CSS把图表容器设为不可见，但Kendo Chart的Tooltip是单独渲染在<body>标签下的独立DOM元素，根本不会跟着图表容器一起消失。下面给你三个实用的解决方案，你可以根据自己的场景选：

方案1：用*ngIf替代[hidden]（最省心） #

*ngIf跟[hidden]不一样，它会直接把图表组件从DOM里移除，这样关联的Tooltip也会被销毁，自然就不会留在页面上了。只需要改一行模板代码：

<div *ngIf="!hidechart"> <!-- 把原来的[hidden]="hidechart"换成这个 -->
  <kendo-chart [categoryAxis]="{ categories: categories }"
               (seriesClick)="onSeriesClick($event)"
               (seriesHover)="onSeriesHover($event)">
    <!-- 其他图表配置都不用改 -->
  </kendo-chart>
</div>

这个方法最简单，不需要额外写逻辑，适合不需要保留图表状态的场景。

方案2：手动调用Tooltip的隐藏方法（适合要保留图表状态的情况） #

如果你必须用[hidden]（比如隐藏后再显示还要保留之前的交互状态），可以通过获取图表实例，强制调用hideTooltip()方法来关掉Tooltip：

首先给图表加个模板引用变量：

<div [hidden]="hidechart">
  <kendo-chart #myChart [categoryAxis]="{ categories: categories }"
               (seriesClick)="onSeriesClick($event, myChart)"
               (seriesHover)="onSeriesHover($event)">
    <!-- 其他配置不变 -->
  </kendo-chart>
</div>

然后修改点击事件的处理逻辑：

public onSeriesClick(e, chartInstance: any): void {
  this.log('seriesClick', e);
  this.hidechart = true;
  // 直接调用图表实例的hideTooltip方法
  chartInstance.hideTooltip();
}

这样隐藏图表的同时，就能立刻把Tooltip也关掉了。

方案3：绑定Tooltip的可见性（更灵活） #

还可以给Tooltip的visible属性绑一个变量，通过控制变量来开关Tooltip：

先在组件里加个变量：

public isTooltipVisible: boolean = true;

然后修改Tooltip的配置：

<kendo-chart-tooltip format="{0}%" [visible]="isTooltipVisible"></kendo-chart-tooltip>

最后在点击事件里同时更新两个变量：

public onSeriesClick(e): void {
  this.log('seriesClick', e);
  this.hidechart = true;
  this.isTooltipVisible = false;
}

如果之后需要重新显示图表，记得把isTooltipVisible改回true就行。

完整修改后的代码（以方案1为例） #

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="!hidechart">
      <kendo-chart [categoryAxis]="{ categories: categories }"
                   (seriesClick)="onSeriesClick($event)"
                   (seriesHover)="onSeriesHover($event)">
        <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
        <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
        <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
        <kendo-chart-series>
          <kendo-chart-series-item *ngFor="let item of series"
                                   type="line"
                                   style="smooth"
                                   [data]="item.data"
                                   [name]="item.name">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    </div>
    <event-log title="Event log" [events]="events"></event-log>
  `
})
export class AppComponent {
  public events: string[] = [];
  public hidechart: boolean = false;
  public series: any[] = [
    { name: 'India', data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855] },
    { name: 'Russian Federation', data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3] },
    { name: 'Germany', data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995] },
    { name: 'World', data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727] }
  ];
  public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
  public onRender(): void {
    this.log('render');
  }
  public onSeriesClick(e): void {
    this.log('seriesClick', e);
    this.hidechart = true;
  }
  public onSeriesHover(e): void {
    this.log('seriesHover', e);
  }
  private log(event: string, arg: any = null): void {
    this.events.push(`${event}`);
    console.log(arg);
  }
}

内容的提问来源于stack exchange，提问作者Amit