代码之家 › 专栏 › 技术社区 › Saif

角度海图-如何动态克隆海图

angular2-highcharts highcharts angular javascript

Saif · 技术社区 · 6 年前

“角度海图”:“最新”
“highcharts”:“最新”

这是现场直播 demo

我在angular 5应用程序中广泛使用angular highcharts。很多时候需要扩展图表(当图表上有很多数据点可见时),以适应创建通用组件的这种情况。

这个名为chart widget的组件在引导卡中显示图表,并带有一个展开图表的选项,在展开时,在模式中打开同一个图表。这个通用组件将负责在模式中打开任何图表所需的所有逻辑(可以拖动和调整大小)。这样我们就不需要到处复制相同的功能。

我做了一个通用组件,所有的东西都可以正常工作,但是最近我们升级了我们的回购依赖性,因为我们使用的highcharts版本中存在一些其他问题,这些问题在highcharts的最新版本中得到了修复,所以我们认为最好升级到最新版本。从那时起,这个功能就停止工作了。

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

哪里 图表配置

传递给模态的图表对象。

图表配置选项 财产现在已经私有化了,所以我也试着:

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

所以现在我的问题是 如何动态克隆现有图表

很多地方都需要这个功能,所以我不能在每个地方都维护单独的图表对象。
此外,在图表上还有许多操作正在执行,如setData、setCategories、addSeries、removeSeries、update e.t.c。这就是为什么不建议在每次操作中维护和更新副本。此外,这些操作将由父组件执行,因此ChartWidgetComponent在执行这些更改时无法察觉这些更改。

那么简而言之,如何动态克隆现有的highchart?最好的方法是什么?

2 回复 | 直到 6 年前

daniel_s 6 年前

chart.options 如果之前(最初)没有定义序列数据,则将其传递给新的序列数据。在这种情况下,您需要获取数据(来自response)并将其分配给新的组件变量,然后将其传递给小部件并更新序列。以下是操作说明:

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

谨致问候!

Abel Valdez 6 年前

我也在使用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>