amchart在angular5中无法与Safari浏览器完美配合

Question

我正在尝试在angular5中的amchart的帮助下创建一个动画的轨距图。

app.component.ts

ngAfterViewInit() {
    this.chart = this.AmCharts.makeChart("chartdiv", {
      "theme": "light",
      "type": "gauge",
      "axes": [{
        "topTextFontSize": 20,
        "topTextYOffset": 70,
        "axisColor": "#31d6ea",
        "axisThickness": 1,
        "endValue": 100,
        "gridInside": true,
        "inside": true,
        "radius": "50%",
        "valueInterval": 10,
        "tickColor": "#67b7dc",
        "startAngle": -90,
        "endAngle": 90,
        "unit": "%",
        "bandOutlineAlpha": 0,
        "bands": [{
          "color": "#0080ff",
          "endValue": 100,
          "innerRadius": "105%",
          "radius": "170%",
          "gradientRatio": [0.5, 0, -0.5],
          "startValue": 0
        }, {
          "color": "#3cd3a3",
          "endValue": 0,
          "innerRadius": "105%",
          "radius": "170%",
          "gradientRatio": [0.5, 0, -0.5],
          "startValue": 0
        }]
      }],
      "arrows": [{
        "alpha": 1,
        "innerRadius": "35%",
        "nailRadius": 0,
        "radius": "170%"
      }]
    });

    setTimeout(() => {
      setInterval(() => {
        var value = Math.round(Math.random() * 100);
        this.chart.arrows[0].setValue(value);
        this.chart.axes[0].setTopText(value + " %");
        // adjust darker band to new value
        this.chart.axes[0].bands[1].setEndValue(value);
      },2000)
    },2000)
  }

  ngOnDestroy() {
    if (this.chart) {
      this.AmCharts.destroyChart(this.chart);
    }
  }

app.component.html

<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>

在上面的代码中我创建了一个简单的动画量规图，我还向量规图添加了bands属性。问题是当将查询参数附加到当前url时，色带的颜色会自动变为黑色。此问题仅在Safari浏览器中有效，而在chrome或firefox中则没有。有人可以帮助我解决此问题吗？