如何解决仪表针的值在更新时始终从0开始带有Angular 7的HighCharts
我正在Angular 7项目中工作,我需要实现highchart gauge。实施的仪表有3根针。其中之一是,它的值每1分钟更新一次。问题是指针总是从0开始重新开始。
我试图将animation:false
设置为有效,但是我希望针可以动画,因为它看起来要好得多。
public gauge_options: any = {
chart: {
type: 'gauge',},series: [{
animation: false,name: 'max',data: [128],dial: {
backgroundColor: 'red'
}
},{
animation: false,name: 'KW',data: [105],dial: {
backgroundColor: 'black'
}
},name: 'min',data: [21],dial: {
backgroundColor: 'green'
}
}]
}
以及API响应:
this.subscription = source.subscribe(val => this.getApiResponse(apiLink).then(
data => {
this.gauge_options.series[1].data[0]=data[0]; // data[0] is a number between 0 and 160
Highcharts.chart('container',this.gauge_options);
},error => {
console.log('Something went wrong.');
})
解决方法
我如下解决了该问题:
this.subscription = source.subscribe(val => this.getApiResponse(apiLink).then(
data => {
Highcharts.chart(this.gauge_container_id,this.gauge_options,function (chart) {
chart.series[1].points[0].update(data[0]);
});
},error => {
console.log('Something went wrong.');
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。