Диаграмма с накоплением amcharts - выделите значение (изменение альфа) в ответ на событие

Question

У меня есть гистограмма, построенная из amcharts .Я построил столбчатую диаграмму с накоплением, следуя этому примеру .

Я пытаюсь изменить альфа (или цвет) поля, если я нахожусь над другим элементом на моей странице (дляпример таблицы).Например, я хотел бы изменить альфа (или цвет) поля для (2003, Европа), если пользователь наводит курсор на соответствующую ячейку таблицы где-то на моей странице.

Я поместил свою диаграмму под углом6 компонент, но я думаю, что это не имеет большого значения, пока я правильно фиксирую события изменения ввода.

---

РЕДАКТИРОВАТЬ 1.

Я все еще испытываю трудности при навигации по объектам.Я строю гистограмму, и она выглядит хорошо

  createSeries(field, name) {
    var series = this.chart.series.push(new am4charts.ColumnSeries());
    series.name = name;
    series.dataFields.valueY = field;
    series.dataFields.categoryX = "country";
    series.sequencedInterpolation = true;
    series.columns.template.fillOpacity = 0.5

    // Make it stacked
    series.stacked = true;

    // Configure columns
    series.columns.template.width = am4core.percent(60);
    series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";
    console.log(series)
    return series
  }

У меня есть четыре серии столбцов, по одной для каждого поля в моих данных.Я могу представить серию по полю.

  grabBar(country, field) {
    // If you don't have access to the chart code in your angular scope,
    // use am4core global.
    // no reason to loop through ALL series/columns, just whipped this up quick
    let foundBar: am4charts.XYSeries | null;
    this.chart.series.each(series => {
      if (series.dataFields.categoryY == field) {
        console.log("yay")
        series.dataItems.values
      }
    });
    return foundBar;

, но не могу найти способ доступа к элементу, который соответствует стране и конкретному полю.Я вижу четыре, по одному на каждое поле, ColumnSeries, у которых нет свойства columns.У моего am4core.registry.baseSprites[0] там нет series.

Это мой полный код:

import { Component, OnInit, NgZone, Input } from '@angular/core';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { CountryItinerary, Team } from "../model/classes"

am4core.useTheme(am4themes_animated);



@Component({
  selector: 'barchart-distance',
  templateUrl: './barchart-distance.component.html',
  styleUrls: ['./barchart-distance.component.scss']
})
export class BarchartDistanceComponent implements OnInit {

  constructor(private zone: NgZone) { }
  _selectedTeam: Team | null

  @Input() 
  set selectedTeam(team: Team | null) {
    this._selectedTeam = team;
    if (team) {
      this.changeColorToBar(team.isocode, "week_1", 1.0)
    }
  }

  chart: am4charts.XYChart
  categoryAxis: any
  valueAxis: any

  ngOnInit() {

  }

  grabBar(country, weekId) {
    // If you don't have access to the chart code in your angular scope,
    // use am4core global.
    // no reason to loop through ALL series/columns, just whipped this up quick
    let foundBar: am4charts.XYSeries | null;
    this.chart.series.each(series => {
      if (series.name == "Week_2") {
        console.log(series.dataItem)
      }

    });
    return foundBar;
  }

  changeColorToBar(country, weekId, opacity) {
    let bar = this.grabBar(country, weekId)
    if (bar) {
      bar.background.fillOpacity = opacity
    }
  }

  createSeries(field, name) {
    var series = this.chart.series.push(new am4charts.ColumnSeries());
    series.name = name;
    series.dataFields.valueY = field;
    series.dataFields.categoryX = "country";
    series.sequencedInterpolation = true;
    series.columns.template.fillOpacity = 0.5

    // Make it stacked
    series.stacked = true;

    // Configure columns
    series.columns.template.width = am4core.percent(60);
    series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";
    console.log(series)
    return series
  }

  drawWithData() {
    this.zone.runOutsideAngular(() => {
      this.chart = am4core.create("chartdiv2", am4charts.XYChart);
      let data = [
        new CountryItinerary("Italy", "IT", [10, 15, 15, 22]),
        new CountryItinerary("Germany", "DE", [20, 30, 40, 24]),
        new CountryItinerary("Greece", "GR",  [13, 10, 20, 15])
      ]

      this.chart.data = data.map ((el) => {
        let newEl = { "country": el.isocode }
        el.distances.forEach((item, index) => {
          newEl["week_" + index] = item
        })
        return newEl   
      })
      console.log(this.chart.data)

      this.categoryAxis = this.chart.xAxes.push(new am4charts.CategoryAxis());
      this.categoryAxis.dataFields.category = "country";
      this.categoryAxis.renderer.grid.template.location = 0;

      this.valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());
      this.valueAxis.renderer.inside = true;
      this.valueAxis.renderer.labels.template.disabled = true;
      this.valueAxis.min = 0;

      let numberOfTrips = data[0].distances.length
      for (let i = 0; i < numberOfTrips; i++) {
        this.createSeries("week_" + i, "Week_" + i)
     } 
     console.log(this.chart.series)


    })
  }

  ngAfterViewInit() {
    this.drawWithData()
  }

}

Там, series.dataItem.dataContext не определено.

Answer 1

(Добавление другого ответа после того, как он предоставил фактический угловой код и где что-то не так, мой предыдущий ответ кажется гораздо менее актуальным.)

Я передал свой собственный метод как Input() компоненту таблицы, но убедился, что использовал функцию стрелки, чтобы сохранить область действия этого компонента диаграммы:

  selectTeam = (team, weekN) => {
    this._selectedTeam = team;
    if (team) {
      this.changeColorToBar(team.isocode, weekN, 1.0);
    }
  }

Что касается самого столбца, поскольку значение свойства, которое вы хотите изменить, также может измениться, возможно, не имеет смысла использовать States и фактически настраивать свойства непосредственно на объекте. В этом случае вы должны изменить fillOpacity напрямую, а не в столбце background:

  changeColorToBar(country, weekId, opacity) {
    let bar = this.grabBar(country, weekId);
    if (bar && bar !== this.currentBar) {
      if (this.currentBar) this.currentBar.fillOpacity = 0.5; // Default
      bar.fillOpacity = opacity;
      this.currentBar = bar;
    }
  }

У меня не было проблем с поиском диаграммы, ее серии и столбцов. Сроки, конечно, могут быть проблемой, то есть диаграммы и серии должны быть действительно загружены, но это, вероятно, произойдет к тому времени, когда пользователь зависнет:

  grabBar(country, weekId = 0) {
    const totalSeries = this.chart.series.length;
    for (let i = 0; i < totalSeries; ++i) {
      const series = this.chart.series.getIndex(i);
      if (series.name === "Week_" + weekId) {
        const totalColumns = series.columns.length;
        for (let c = 0; c < totalColumns; ++c) {
          const column = series.columns.getIndex(c);
          if (
            column.dataItem.dataContext.country === country
          ) {
            return column;
          }
        }
      }
    }
  }

Вот демоверсия:

https://stackblitz.com/edit/so-55597531-table-input-chart

Если вы все еще не можете найти столбцы внутри серии, а что нет, возможно, поместите образец вашего проекта в StackBlitz, чтобы мы могли попытаться выяснить, где что-то идет не так.

Answer 2

Вы захотите получить информацию, которую можно использовать для определения Column на графике. Например. заголовки строк / столбцов диаграммы или данные из вашего приложения. Затем вы можете перебирать серии графиков, чтобы соответствовать их данным, например, название страны и итерируйте их columns 'dataItem.dataContext.year, чтобы соответствовать году.

С указанием года и страны мы можем получить столбец из серии, например ::1006

function grabColumn(year, country) {
  // If you don't have access to the chart code in your angular scope,
  // use am4core global.
  // no reason to loop through ALL series/columns, just whipped this up quick
  let foundColumn;
  am4core.registry.baseSprites[0].series.each(series => {
    if (series.name === country) {
      series.columns.each(column => {
        if (column.dataItem.dataContext.year === year) {
          foundColumn = column;
        }
      });
    }
  });
  return foundColumn;
}

Чтобы изменить цвета , в то время как вы можете напрямую установить свойство fill для column, я рекомендую использовать States , например. добавив это в конец createSeries метод:

  const highlightState = series.columns.template.states.create('highlight');
  highlightState.properties.fill = am4core.color("#f00"); // These are fine, too: // am4core.color("red"); // "red";

Итак, с учетом таблицы:

  <table>
    <thead><tr><td></td><th>Europe</th><th>North America</th><th>Asia</th><th>Latin America</th><th>Middle East</th><th>Africa</th></tr></thead>
    <tbody>
      <tr><th>2003</th><td>2.5</td><td>2.5</td><td>2.1</td><td>1.2</td><td>0.2</td><td>0.1</td></tr>
      <tr><th>2004</th><td>2.6</td><td>2.7</td><td>2.2</td><td>1.3</td><td>0.3</td><td>0.1</td></tr>
      <tr><th>2005</th><td>2.8</td><td>2.9</td><td>2.4</td><td>1.4</td><td>0.3</td><td>0.1</td></tr>
    </tbody>
  </table>

При наведении курсора на ячейку данных первый год в ее строке содержит год, а тот же самый nth дочерний элемент в строке заголовка содержит страну. Мы можем использовать это, чтобы взять правильный столбец и изменить его состояние, вместо querySelector / addEventListener, это будет ваш угловой материал:

const $headerRow = document.querySelector('thead tr');
let highlightedColumn;
document.querySelector('tbody').addEventListener('mouseover', event => {
  if (event.target.matches('td')) {
    const year = event.target.parentElement.getElementsByTagName('th')[0].childNodes[0].nodeValue;
    const siblings = event.target.parentNode.children;
    const totalSiblings = siblings.length;
    let country;
    for(let i = 1; i < totalSiblings; ++i) {
      if (siblings[i] === event.target) {
        country = $headerRow.children[i].childNodes[0].nodeValue;
        break;
      }
    }

    const column = grabColumn(year, country);
    if (highlightedColumn !== column) {              
      if (highlightedColumn) {
        highlightedColumn.setState('default');
      }
      column.setState('highlight');
      highlightedColumn = column;
    }
  }
});

Вы также хотели бы убедиться, что есть правильное событие mouseout для сброса выделенного столбца.

Вот демоверсия:

https://codepen.io/team/amcharts/pen/36fae5caa2538b22fc2111666749c0b3