amcharts 堆叠条形图 - 突出显示值（更改 alpha）以响应事件

Question

我有一个用 amcharts 构建的条形图。我按照 this example.

构建了堆积条形图

如果我将鼠标悬停在页面中的某个其他元素（例如 table）上，我正在尝试更改框的 alpha（或颜色）。例如，如果用户将鼠标悬停在我页面上相应的 table 单元格上，我想更改 (2003, Europe) 框的 alpha（或颜色）。

我已将图表放在 angular 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

您需要获取可用于确定图表中 Column 的信息。例如。来自您应用的图表 row/column header 或数据。然后您可以遍历图表的系列以匹配它们的数据，例如国家名称，并遍历 columns' dataItem.dataContext.year 以匹配年份。

有了年份和国家，我们可以从一个系列中抓取一个列，例如：

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;
}

要更改 colors, while you can set the fill property of the column directly, I recommend using 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:

  <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>

将鼠标悬停在数据单元格上，其行的第一个 child 包含年份，nth child header 行包含国家。我们可以使用它来获取正确的列并更改其状态，而不是 querySelector/addEventListener，这将是你的 angular 东西：

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

Answer 2

（在他提供了实际的 angular 代码之后添加了一个不同的答案，并且在他出现问题的地方添加了一个不同的答案，我之前的答案似乎不太相关。）

我将自己的方法作为 Input() 传递给了 table 组件，但确保使用了箭头函数，因此它保留了此图表组件的范围：

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

至于列本身，由于您要更改的属性的值也可能会更改，因此使用状态并实际直接在对象上调整属性可能意义不大。在这种情况下，您将直接更改 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 上发布您的项目示例，以便我们可以尝试查看哪里出了问题。

amcharts 堆叠条形图 - 突出显示值（更改 alpha）以响应事件

amcharts stacked barchart - highlight value (change alpha) in response to event

hover

amcharts

typescript

angular

amcharts4