如何在Highcharts条形图中添加第三组数据

时间:2018-11-18 16:52:35

标签: javascript jquery angular highcharts

我正在制作一个有角度的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. } } }) } } 是工具提示,每辆车在条形图上显示的都是正确的条形?

0 个答案:

没有答案