4 changed files with 834 additions and 855 deletions
File diff suppressed because it is too large
@ -0,0 +1,3 @@ |
|||||
|
export class Constant{ |
||||
|
public static readonly baseUrl: string = 'http://rdp.nagr.com.cn:18080'; |
||||
|
} |
@ -0,0 +1,128 @@ |
|||||
|
import * as Highcharts from 'highcharts'; |
||||
|
|
||||
|
export class HighChartCreate { |
||||
|
|
||||
|
private readonly id: string; |
||||
|
|
||||
|
private highChart: any; |
||||
|
private chart: any; |
||||
|
private xAxis: Array<any> = []; |
||||
|
private yAxis: Array<any> = []; |
||||
|
private series: Array<any> = []; |
||||
|
private legend: any = null; |
||||
|
private tooltip: any = null; |
||||
|
|
||||
|
constructor(id: string) { |
||||
|
this.id = id; |
||||
|
} |
||||
|
|
||||
|
public setChart(inverted: boolean = false, type: string = 'line'): void{ |
||||
|
this.chart = { |
||||
|
type: type, |
||||
|
inverted: inverted |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
public setXAxis(text: string, reversed: boolean = true){ |
||||
|
this.xAxis.push({ |
||||
|
reversed: reversed, |
||||
|
title: { |
||||
|
enabled: true, |
||||
|
text: text, |
||||
|
style: { |
||||
|
color: '#000000', |
||||
|
fontSize: '18px' |
||||
|
} |
||||
|
}, |
||||
|
categories: [], |
||||
|
showLastLabel: true, |
||||
|
showFirstLabel: true, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public setYAxis(text: string, max: number, min: number, tickInterval: number, tickAmount: number, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true){ |
||||
|
this.yAxis.push({ |
||||
|
title: { |
||||
|
text: text, |
||||
|
style: { |
||||
|
color: '#000000', |
||||
|
fontSize: '18px' |
||||
|
} |
||||
|
}, |
||||
|
max: max, |
||||
|
min: min, |
||||
|
tickInterval: tickInterval, |
||||
|
tickAmount: tickAmount, |
||||
|
lineWidth: lineWidth, |
||||
|
opposite: opposite |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public setLegend(){ |
||||
|
this.legend = { |
||||
|
layout: 'vertical', |
||||
|
align: 'right', |
||||
|
verticalAlign: 'middle' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public setTooltip(pointFormat: string, headerFormat: string = '<b>{series.name}</b><br/>'){ |
||||
|
this.tooltip = { |
||||
|
headerFormat: headerFormat, |
||||
|
pointFormat: pointFormat |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public setSeries(name: string) |
||||
|
public setSeries(name: string, yAxis: number = 0, valueSuffix: string = null, color: string = null){ |
||||
|
let series: any = { |
||||
|
name: name, |
||||
|
data: [], |
||||
|
} |
||||
|
if (color == null || valueSuffix == null){ |
||||
|
this.series.push(series); |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
series.yAxis = yAxis; |
||||
|
series.tooltip = { |
||||
|
valueSuffix: valueSuffix |
||||
|
}; |
||||
|
series.color = color; |
||||
|
this.series.push(series); |
||||
|
} |
||||
|
|
||||
|
public init(): void{ |
||||
|
const options = this.getOptions(); |
||||
|
this.highChart = Highcharts.chart(this.id, options); |
||||
|
// return this.highChart;
|
||||
|
} |
||||
|
|
||||
|
private getOptions(){ |
||||
|
let options: any = { |
||||
|
credits: { |
||||
|
enabled: false |
||||
|
}, |
||||
|
chart: this.chart, |
||||
|
title: { |
||||
|
text: null |
||||
|
}, |
||||
|
xAxis: this.xAxis, |
||||
|
yAxis: this.yAxis, |
||||
|
tooltip: this.tooltip, |
||||
|
series: this.series |
||||
|
}; |
||||
|
if (this.legend != null) |
||||
|
options.legend = this.legend; |
||||
|
|
||||
|
return options; |
||||
|
} |
||||
|
|
||||
|
public updateSeries(index: number, data: Array<any>): void{ |
||||
|
this.highChart.series[index].setData(data); |
||||
|
} |
||||
|
|
||||
|
public updateXAxis(categories: Array<any>, index: number = 0){ |
||||
|
this.highChart.xAxis[index].setCategories(categories); |
||||
|
} |
||||
|
} |
Loading…
Reference in new issue