Highcharts 如何切换 DataLabel

Question

我有一个包含两个系列的图表。我想通过单击按钮来切换系列的数据标签。

changeDatalabel(): void { 

if (!this.dataLabelEnabled) { // global Var
  this.chart.ref.series[0].update({ dataLabels: { enabled: true } }); // Compile error
  this.dataLabelEnabled = true; // for toggling
} else {
  this.chart.ref.series[0].update({ dataLabels: { enabled: false } }); // Compile error
  this.dataLabelEnabled = false; // for toggling
}

问题是updateMethod在我插入"dataLabels: {enable: true}"时出现编译错误，他正在跳出方法"changeDatalabel()"。

当我使用 updateMethod 获得两个按钮时，编译错误再次出现，但它有效。

createLabel(): void {
this.chart.ref.series[0].update({ dataLabels: { enabled: true } });



deleteLabel(): void {
this.chart.ref.series[0].update({ dataLabels: { enabled: false } });

Answer 1

这是正确类型的问题。您可以在 @types/highcharts 中看到 series.update 第一个参数是 IndividualSeriesOptions 类型，它没有 DataLabels prop.

您可以将选项类型显式设置为 LineChart 类型：

import { LineChart } from 'highcharts';
...

toggleLabel(): void {
  const options: LineChart = {
    dataLabels: {
      enabled: !this.dataLabelEnabled
    }
  }

  this.chart.ref.series[0].update(options);
  this.dataLabelEnabled = !this.dataLabelEnabled;
}

示例：https://stackblitz.com/edit/angular-bmhomi?file=app/highchart-demo/highchart-demo.component.ts

Highcharts 如何切换 DataLabel

Highcharts How to toggle DataLabel

highcharts

angular2-highcharts