Я делаю угловое веб-приложение и пытаюсь визуализировать гистограмму с 3 различными наборами. Я хочу показать 2 набора по оси X и Y и третий набор при наведении курсора на каждый
Согласно документации, это, похоже, подсказка .
В документации показано, как изменить каждое из них вручную, но я вызываю API для данных, поэтому подсказка должна быть несколько динамичной, а не статичной.
Угловой компонент
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
import { BuyerService, BuyerDetail } from '../buyer.service';
import { HttpResponse } from '@angular/common/http';
declare const Highcharts: any;
@Component({
selector: 'app-buyer-details',
templateUrl: './buyer-details.component.html',
styleUrls: ['./buyer-details.component.css']
})
export class DrinkerDetailsComponent implements OnInit {
buyerName: string;
buyerDetails: BuyerDetail[];
constructor(
public buyerService: BuyerService,
private route: ActivatedRoute
) {
route.paramMap.subscribe((paramMap) => {
this.buyerName = paramMap.get('buyer');
this.buyerService.getBuyerSpendingDistribution(this.buyerName).subscribe(
data => {
const cars = [];
const years = [];
const counts = [];
data.forEach(buyer => {
cars.push(buyer.car_name);
years.push(buyer.year)
counts.push(buyer.total_per_year);
});
this.renderChart2(cars, years, counts);
}
);
});
}
renderChart2(cars: string[], years: string[], counts: string[]){
Highcharts.chart('bargraph2', {
chart: {
type: 'column'
},
title: {
text: 'Distribution of Amount Spent By Drinker By Bar'
},
xAxis: {
categories: years,
title: {
text: 'Year'
}
},
yAxis: {
min: 0,
title: {
text: 'Dollars Spent'
}
},
labels: {
overflow: 'justify'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: counts,
}],
tooltip: {
formatter: function() {
// not sure what to put here.
}
}
})
}
}
Как мне сделать так, чтобы cars[]
- это всплывающая подсказка, где каждый автомобиль показывает свою правильную полосу на гистограмме?