Question

我在本地使用以下高图表依赖项：

“高角图表”：“最新”
“最高图表”：“最新”
“ @ types / highcharts”：“最新”

这是我的源代码的实时demo，

在我的angular 5应用程序中，我广泛使用angular-highcharts。有很多时间需要扩展图表（当图表上可见很多数据点时），以适应创建通用组件的情况。

这个名为chart-widget的组件在引导卡中显示图表，并带有扩展图表的选项，展开后，将以模式打开同一图表。该通用组件将处理打开模式中的任何图表所需的所有逻辑（可拖动和调整大小）。这样，我们不需要在每个地方都复制相同的功能。

我做了一个通用组件，一切都可以正常工作，但是最近我们升级了repo依赖项，因为我们正在使用的highcharts版本中还有其他问题，这些问题已在最新版本的highCharts中修复，因此我们认为最好升级到最新版本。从那时起，此功能停止工作。

以下逻辑用于在模式打开时克隆chartConfig。然后，将克隆的配置传递到位于模式内部的展开图。但是现在，展开的图表现在总是空白。

this.expandChartConfig = new Chart(Object.assign({}, this.chartConfig.options));

其中 chartConfig 是用于呈现图表的常规配置，

和 expandChartConfig 是传递给模式的图表对象。

升级后，我意识到 chartConfig.options 属性现在已设为私有，因此我也尝试过：

this.expandChartConfig = new Chart(Object.assign({}, this.chartConfig.ref.options));

但是这也不起作用。

最初，我在两个图表上都使用了相同的配置，但是这导致了当模式关闭时的问题，highChart也被破坏了。因此，我认为在模态内的图表打开模态时实例化一个单独的配置是最好的情况。

所以现在用简单的话来说，我的问题是如何动态地克隆现有图表。

许多地方都需要使用此功能，所以我不能在每个地方都维护单独的图表对象。
还对图表执行了许多操作，例如setData，setCategories，addSeries，removeSeries，updatee.t.c。这就是为什么不建议您在每次操作中维护副本并对其进行更新的原因。这些操作也将由父组件执行，因此ChartWidgetComponent在执行时不会意识到此类更改。

因此，简而言之，我该如何动态克隆现有的图表，以及最佳方法是什么？

P.s。我尝试了在stackOverflow上提到的一堆方法，但是似乎都不起作用。

Answer 1

要获得预期的效果，不幸的是，如果您之前（最初）没有定义系列数据，则复制chart.options并将其传递给新的副本是不够的。在这种情况下，您需要获取数据（从响应中获取）并将其分配给新的组件变量，然后将其传递给小部件并更新您的系列。以下是如何操作的说明：

在组件中添加新字段：

export class AppComponent {
  chartConfig: Chart;
  chartData: Object;
...

将响应分配给创建的字段：

private setChartData(chartData) {
  const options = this.chartConfig.ref.options;
  if (chartData.categories.length === 0) {
    options.lang.noData = `no data from: ${chartData.customMsgFromDate} to ${chartData.customMsgEndDate}.`;
  } else {
    options.lang.noData = 'No data to display';
  }
this.chartData = chartData;

将数据传递到小部件：

<app-chart-widget [chartConfig]="chartConfig" chartLabel="Title" [chartData]="chartData"></app-chart-widget>

将每个系列的数据添加到新的图表选项中：

onExpandChart(content): void {
  this.expandChartConfig = new Chart(this.chartConfig.ref.options);
  // Clone series data
  this.expandChartConfig.options.series.forEach((s, i) => {
    let name = s.name.toLowerCase()
    s.data = this.chartData[name]
  })

  this.modalService.open(content, { size: 'xl' as 'lg' });
  setTimeout(() => {
    this.resizeChart();
  ...

实时示例： https://stackblitz.com/edit/highcharts-cloning-chart-bo3tfp

亲切的问候！

Answer 2

我也在使用Highcharts，当我想绘制其他图表时，我已经将图表定义为可重用组件，我只是通过Input()装饰器传递了值

在这种情况下，您可以使用以下内容：

图表组件ts

@Component ({
    selector: 'char-component'
    ...
})
export class CharComponent {
  Input() options: any; 
}

可重复使用的组件实现

<char-component [options]="firstObject"></char-component>
<char-component [options]="secondObject"></char-component>

要重用的组件代码

export clas Sample implements OnInit {
  ngOninit(){
     firstObject = {...} //Already defined
     secondObject = Object.assign(this.firstObject); //create a copy of this object

  }
}

注意：如果您不知道总共有多少个图表，则可以使用带有options对象的数组，如果需要另一个可以将其画在模板中，只需将其推入数组即可

<char-component *ngfor="option of options" [options]="option "></char-component>

Angular Highcharts-如何动态克隆图表

2 个答案: