我正在制作一个有角度的Web应用程序,并且试图绘制具有3个不同集合的条形图。我想在x轴和y轴上显示其中两个集合,将鼠标悬停在每个集合上时显示第三个集合
根据文档,似乎是tooltip。
文档显示了如何手动更改每个参数,但是我正在调用用于数据的API,因此工具提示必须具有一定的动态性,而不是静态的。
角度组件
package com.example.java8;
import lombok.Data;
@Data
public class Country {
private final String country_iso_code;
private final String name;
}
如何做到这一点,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.
}
}
})
}
}
是工具提示,每辆车在条形图上显示的都是正确的条形?