我正试图在那里实现一个计时器:HighStock Timer
我已经在项目中使用了一些HighChart图表,我需要构建一些饼图和垂直条形图,包括来自Highstock的计时器...提前提交
这是我的代码:(我试图添加" rangeselector"但我什么都看不到 在我看来)
export class MyDailyreportComponent implements OnDestroy, OnInit {
// @Input() showMePartially: boolean;
@Input() displayDetail: boolean;
options: any;
data: Object[];
chart: any;
dataSubscription: Subscription;
constructor(public userService3: UserService3) {
this.options = {
chart: { type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false, },
// legend: { enabled: false },
credits: { enabled: false },
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
title: {
text: null
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false,
// format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
//selected: 4 // all
},
series: [{
name: 'Dispo',
data: []
}]
};
}
saveInstance(chartInstance) {
this.chart = chartInstance;
// console.log(chartInstance);
}
public ngOnInit () {
this.dataSubscription = this.userService3.getData().subscribe((data)
=> {
this.options.series[0].data = data.data.operating_rate;
// Code for the pie
let percentUp = data.data.operating_rate; // 88.14
let percentDown = 100 - percentUp; // 11.86
this.options.series[0].data = [
{
name: 'Up',
y: percentUp,
color: 'green'
},
{
name: 'Down',
y: percentDown,
color: 'white'
}
]
console.log(data);
});
}
public ngOnDestroy() {
if (this.dataSubscription) {
this.dataSubscription.unsubscribe();
}
}
}