Как добавить третий набор данных в гистограмму Highcharts - PullRequest
0 голосов
/ 18 ноября 2018

Я делаю угловое веб-приложение и пытаюсь визуализировать гистограмму с 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[] - это всплывающая подсказка, где каждый автомобиль показывает свою правильную полосу на гистограмме?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...