Question

我有两个系列的图表。我想通过单击按钮来切换系列的dataLabel。

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
}

问题是当我插入＆＃34; dataLabels：{enable：true}＆＃34;时，updateMethod会收到编译错误。他正在跳出方法＆＃34; changeDatalabel（）＆＃34;。

当我使用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

好吧，在Stackblitz的小提琴中，它才有效。我想我有一个依赖问题：

https://stackblitz.com/edit/angular-d8a1dy?file=app%2Fhighchart-demo%2Fhighchart-demo.component.ts

Answer 2

好的，我发现我必须迭代系列中的每个点来添加DataLabel。但是如果我认为我需要这两个for-loops并且我得到了一个可能300点的系列它持续时间为O（n²），那么这是不正确的。这非常慢。

 for (let i = 0; i < this.chart.ref.series.length; i++) {
    const dataLength = this.chart.ref.series[i].data.length;
    for (let j = 0; j < dataLength; j++) {
      this.chart.ref.series[i].data[j].update({ dataLabels: { enabled: true } });
    }
 }

还有其他想法吗？

Answer 3

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

您可以明确将选项类型设置为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

3 个答案: