Я пытаюсь создать анимированный калибровочный график с помощью amchart в angular5.
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>
В приведенном выше коде я создал простой анимированный граф калибровки, я также добавил свойство диаграмм к графику калибровки. Проблема заключается в том, что при добавлении параметров запроса к текущему URL цвет полос автоматически меняется на черный. Я нашел эта проблема только в браузере Safari, а не в Chrome или Firefox. Может кто-нибудь помочь мне решить эту проблему?