Angular 7 Highchart Node.marker 在页面加载时不起作用答案

【问题标题】：Angular 7 Highchart Node.marker not working on page loadAngular 7 Highchart Node.marker 在页面加载时不起作用
【发布时间】：2020-04-23 10:20:34
【问题描述】：

我在我的仪表板上使用 Angular 7 和 Highchart，它首先加载。加载页面时，我希望标记为 radius:50，但加载页面时，它不会将 半径设置为 50。当我单击其他路由器链接并返回时，它工作得很好。我已经在Stackblitz 中复制了这个问题。

最初加载页面时，当我取消注释 addColours() 中的 debugger 时，它无法正确显示，它按预期工作。我知道我做错了，部分代码在图形形成之前执行，或者部分文件在加载时被延迟。

我也试过这样修改

let highchart: any = Highcharts;
Highcharts.addEvent(Highcharts.Series, 'afterSetOptions', function (e: any) {
  var colors = Highcharts.getOptions().colors, i = 0, nodes = {};
  if (this instanceof highchart.seriesTypes.networkgraph &&
    e.options.id === 'network-budget') {
      ---- doing my stuff
    }

【问题讨论】：

我看到您使用的不是官方的 Highcharts Angular 包装器。尝试使用官方支持的包装器重现您的案例：github.com/highcharts/highcharts-angular
官方highcharts-angular或angular-highcharts哪个是官方的
使用 `highchart-angular' 也有同样的问题.....这里我已经在 stackblitz stackblitz.com/edit/networkgraph-highchart-angular?file=src/app/… 中重现它
我检查了两个演示，似乎一切都与highcharts-angular 一起正常工作 - 页面加载后标记的大小正确。根据您之前的问题 - highcharts-angular 是 Angular 的唯一官方包装器。

标签： angular highcharts angular7 angular-highcharts

【解决方案1】：

chartCallback 在图表已经完全渲染并准备好开始初始动画时触发。当afterSetOptions 被触发时，您的自定义逻辑就会启动。为了实现这一目标，该系列必须更新。所以，我添加了这一行来强制更新：

chart.series[0].update({})

Live demo

【讨论】：