Question

所以我有一个图表，在创建图表之后，我需要使用图例来更改图例的名称

this.chart.legend.allItems[i].update({name: ''})
this.chart.redraw()

但我收到此错误：

Property 'allItems' does not exist on type 'LegendObject'.

即使在文档中提到了它，也可以在实现时根据需要进行操作，但是我无法部署我的更改，因为它捕获了以上错误。为什么有角度地抛出这种错误？

Answer 1

不幸的是，我不知道为什么Angular会抛出该错误。您可以附加this.chart.legend对象的内容吗？

但是，我建议您使用官方的用于Angular的Highcharts包装器（可以在此处下载：https://github.com/highcharts/highcharts-angular），因为不建议在Angular框架之外更新图表 >。然后，您可以只更改带有已更改图例名称的图表选项，并更改updateFromInput标志以更新整个图表组件。检查下面发布的代码和演示。

app.module.ts：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HighchartsChartModule } from "highcharts-angular";
import { ChartComponent } from "./chart.component";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent, ChartComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

chart.component.html：

<div class="boxChart__container">
  <div>
    <highcharts-chart
      id="container"
      [Highcharts]="Highcharts"
      [constructorType]="chartConstructor"
      [options]="chartOptions"
      [callbackFunction]="chartCallback"
      [(update)]="updateFromInput"
      [oneToOne]="true"
      style="width: 100%; height: 400px; display: block;"
    >
    </highcharts-chart>

    <button (click)="update_chart()">Change legend name</button>
  </div>
</div>

chart.component.ts：

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
  title = "app";
  chart;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  chartOptions = {
    series: [
      {
        name: "Series name",
        data: [1, 2, 3, 6, 9]
      }
    ],
    exporting: {
      enabled: true
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: "Data"
      }
    }
  };

  constructor() {
    const self = this;

    this.chartCallback = chart => {
      self.chart = chart;
    };
  }

  ngOnInit() {}

  update_chart() {
    const self = this,
      chart = this.chart;

    self.chartOptions.legend = {
      labelFormatter: function() {
        return `${this.name} - edited`;
      }
    };

    self.updateFromInput = true;
  }
}

演示：
https://codesandbox.io/s/7y5j93l2rq

Highcharts Angular包装器：
https://github.com/highcharts/highcharts-angular

HighCharts无法识别图例功能

1 个答案: