Я уже отображаю значения x и y в моей подсказке на старшей диаграмме в моем угловом 4 приложении. Пожалуйста, ознакомьтесь с функцией форматирования всплывающей подсказки. Массив graphdata инициализируется тремя значениями, как вы можете видеть ниже
Если вы в коде диаграммы позвоночника, я передаю объект серии в метод статической диаграммы. Теперь у меня есть доступ к объекту серии. Объект серии содержит массив
объектов данных. Каждый элемент содержит значения, например, для {90000, 1, 1000000}. Как мне найти третье значение на основе первых двух значений. Я думаю, что мне нужно
найдите если point.x == firstelement и point.y == второй элемент, то покажите третий элемент.
Так что синтаксис мудрый, я думал, что series.find (), но не уверен, как его построить
Я пытаюсь заполнить третью строку меткой Captive Required в конструкции таблицы функции форматирования. Полный код доступен ниже под заголовком сплайн-диаграммы
const table = function(format, point) {
let txt = '<strong style="font-size:12px;color:' + point.series.color + '">' + point.series.name + '</strong><br><br>';
txt += '<table>';
txt += row('GRAPH_XAXIS', format(point.x));
txt += row('GRAPH_YAXIS', format(numberPercentPipe.transform(point.y)) + '%');
txt += row('Captive Required', + '%');
txt += '</table>';
return txt;
};
Вот как инициализируется чартсерия
this.chartSeries = value.map(element => ({ data: element.graphData, name: element.strategyName, color: element.strategyColor }));
График данных
trigger2Output.StressTestAnalysis.GraphData = new decimal[][]
{
new decimal[] { 90000, 1, 1000000},
new decimal[] { 91000, 1, 2000000},
new decimal[] { 92000, 1, 3000000},
new decimal[] { 93000, 1, 4000000},
new decimal[] { 94000, 1, 5000000},
new decimal[] { 95000, 1, 6000000},
new decimal[] { 96000, 1, 7000000},
new decimal[] { 121, 3434,1000000},
new decimal[] { 121, 3434,1000000},
new decimal[] { 121, 3434,1000000},
new decimal[] { 121, 3434,1000000},
new decimal[] { 121, 3434,1000000},
new decimal[] { 121, 3434,1000000},
new decimal[] { 121, 3434, 1000000}
} ;
Компонент сплайн-диаграммы
import { Component, Input, OnChanges, Inject, LOCALE_ID } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ShortNumberFormatPipe, NumberPercentPipe } from '@wtw/toolkit';
@Component({
selector: 'splinechart',
template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
styles: [`
chart {
display: block;
width: 100% !important;
padding:0;
}`]
})
spline chart component
export class SplineChartComponent implements OnChanges {
static chart(shortNumberFormatPipe: ShortNumberFormatPipe, numberPercentPipe: NumberPercentPipe, translate: TranslateService, graphLegendTitle: string, series: any) {
return {
credits: {
enabled: false
},
chart: {
type: 'spline'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
layout: 'horizontal',
margin: 25,
itemMarginTop: 0,
symbolRadius: 0,
symbolHeight: 20,
symbolWidth: 20,
useHTML: true,
title: {
text: graphLegendTitle,
margin: 50,
style: {
fontStyle: 'italic',
fontWeight: 'normal'
}
},
align: 'right',
verticalAlign: 'bottom',
},
exporting: {
chartOptions: {
scale: 1,
legend: {
allowHTML: true,
enabled: true,
margin: 25,
itemMarginTop: 0,
symbolRadius: 0,
symbolHeight: 20,
symbolWidth: 20,
useHTML: true,
align: 'right',
verticalAlign: 'bottom'
},
chart: {
width: 1500,
height: 600,
events: null
}
}
},
xAxis: {
title: {
text: translate.instant('CAPTIVES.RESULTS.STA.GRAPH_XAXIS')
}
},
yAxis: {
title: {
text: translate.instant('CAPTIVES.RESULTS.STA.GRAPH_YAXIS')
},
labels: {
formatter: function() {
return numberPercentPipe.transform(this.value);
}
}
},
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
let isMillionNumber: boolean = false;
const row = function(label, value) {
const key = 'CAPTIVES.RESULTS.STA.';
return '<tr><td style="font-size:10px;">' + translate.instant(key + label) + ': </td>'
+ '<td style="font-size:10px;"><b>' + value + '</b></td></tr>';
};
const transformNumber = function(value) {
isMillionNumber = validateMillionNumber(value);
if (isMillionNumber)
return shortNumberFormatPipe.transform(value, 2);
else
return shortNumberFormatPipe.transform(value, 0);
};
const table = function(format, point) {
let txt = '<strong style="font-size:12px;color:' + point.series.color + '">' + point.series.name + '</strong><br><br>';
txt += '<table>';
txt += row('GRAPH_XAXIS', format(point.x));
txt += row('GRAPH_YAXIS', format(numberPercentPipe.transform(point.y)) + '%');
txt += row('Captive Required', + '%');
txt += '</table>';
return txt;
};
let point = this.points[this.points.length - 1].point;
return table(transformNumber, point);
function validateMillionNumber(millionNumber: number) {
return millionNumber >= 1000000;
}
},
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
legendItemClick: function() {
const elements = document.querySelectorAll('.highcharts-legend-item path');
for (let i = 0; i < elements.length; i++) {
elements[i].setAttribute('stroke-width', '20');
elements[i].setAttribute('stroke-height', '20');
}
this.chart.redraw();
}
},
allowPointSelect: true,
},
spline: {
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: true,
symbol: 'circle'
},
}
},
series: [
{
showInLegend: false
}]
};
}
public options: any;
chart: any;
@Input() public series: any;
@Input() public height: number = 400;
@Input() public yaxisdata: any;
@Input() public selectedRating: string = '';
@Input() usedInPdf: boolean = false;
private shortNumberFormatPipe = new ShortNumberFormatPipe();
private numberPercentPipe = new NumberPercentPipe(this._locale);
constructor(private _translate: TranslateService, @Inject(LOCALE_ID) private _locale: string) {
}
ngOnInit() {
let graphLegendTitle: string = this._translate.instant('CAPTIVES.RESULTS.COMMON.GRAPH_LEGEND_TITLE');
if (this.usedInPdf) {
graphLegendTitle = '';
}
this.options = SplineChartComponent.chart(this.shortNumberFormatPipe, this.numberPercentPipe, this._translate, graphLegendTitle, this.series);
}
getInstance(chartInstance): void {
this.chart = chartInstance;
this.redraw();
}
ngOnChanges(data: any) {
if (!data.series.currentValue || !this.chart) return;
this._redrawLogic(data.series.currentValue);
this.chart.reflow();
}
public redraw() {
if (!this.chart) return;
this._redrawLogic(this.series);
this.chart.redraw();
}
private _redrawLogic(series: any) {
let seriesLength = this.chart.series.length;
for (let i = seriesLength - 1; i > -1; i--) {
this.chart.series[i].remove();
}
series.map(s => {
this.chart.addSeries(s);
});
const elements = document.querySelectorAll('.highcharts-legend-item path');
for (let i = 0; i < elements.length; i++) {
elements[i].setAttribute('stroke-width', '20');
elements[i].setAttribute('stroke-height', '20');
}
}
}