我在本地使用以下高图表依赖项：
- "角度高图"："最新">
- "高图表"："最新">
- "@types/高图表"："最新">
这是我的源代码的现场演示，
我在我的角度 5 应用程序中广泛使用角度高图。很多时候需要扩展图表(当图表上有很多可见的数据点时(，以适应这种情况，尽管我创建了一个通用组件。
这个名为 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，update e.t.c.这就是为什么不建议在每次操作时维护副本并更新它们的原因。此外，这些操作将由父组件执行，因此 ChartWidgetComponent 在执行此类更改时无法意识到此类更改。
简而言之，我如何动态克隆现有的高图表，以及最好的方法是什么？
附言我尝试了堆栈溢出上提到的一堆方法，但似乎都没有工作。
为了达到预期的效果，不幸的是，如果您之前(最初(没有定义序列数据，则复制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
亲切问候！
我也在使用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>