我使用角度4实现了一个whisker bloxplot高图。我试图在工具提示中显示正确的系列名称。尽管将正确的系列名称与系列一起传递,但它在鼠标悬停时无法正确显示。我有三个系列,所有系列都显示系列1.我需要显示以下名称
商业期权净成本 自我保险选择 专属期权净成本
父组件
import { Component, Input, OnInit } from '@angular/core';
import { NpvAnalysis, NpvAnalysisResult, createNpvAnalysisResult } from '../../../../shared/models/results';
import { ReactiveComponent } from '@wtw/toolkit/src/utils/base.component';
@Component({
selector: 'app-net-present-value-analysis',
templateUrl: './net-present-value-analysis.component.html',
})
export class NetPresentValueAnalysisComponent extends ReactiveComponent implements OnInit {
isExpanded = false;
showTable = true;
showProjection = false;
public selectedAnalysis: NpvAnalysis = null;
@Input() set npvResults(value: Array<NpvAnalysis>) {
this._npvResults = value;
this.processResults();
}
public results: Array<NpvAnalysisResult> = [];
private _npvResults: Array<NpvAnalysis> = [];
constructor() {
super();
}
ngOnInit() {
}
processResults() {
if (!this._npvResults) {
return;
}
this.results = this._npvResults.map((result: any) => {
return createNpvAnalysisResult(result);
});
}
showProjectionClick(i) {
const results = this._npvResults[i];
if (results) {
this.selectedAnalysis = results;
this.showProjection = true;
}
}
hideProjection() {
this.selectedAnalysis = null;
this.showProjection = false;
}
}
Bloxplot组件
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-box-plot-chart',
template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
styles: [`
chart{
display: block;
width: 100% !important;
padding:0;
}
`]
})
export class BoxPlotChartComponent {
public options: any;
chart: any;
@Input() public series: any;
constructor() {
this.options = {
chart: {
type: 'boxplot'
},
title: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
}, plotLines : false
},
tooltip: {
valueDecimals: 0,
},
series: [
]
};
}
getInstance(chartInstance): void {
this.chart = chartInstance;
this.redraw();
}
ngOnChanges(data: any) {
if (!data.series.currentValue || !this.chart) return;
data.series.currentValue.map(s => {
this.chart.addSeries(s);
});
this.chart.reflow();
}
redraw() {
if (!this.chart) return;
this.chart.addSeries(this.series);
}
}
我将chartseries对象分配给图表的系列属性。它包含一个包含以下值的数据对象。除了系列名称,我可以做其他所有事情。我是否需要传递系列名称以及系列的一部分
color:"#C111A0"
high:-71767.9361577481
low:-71296.6466409404
median:-71516.2386928737
q1:-71456.5239243761
q3:-71569.3280927532
tooltip:"Captive View"