Какой лучший способ найти указанный столбец c в amCharts XYChart? - PullRequest
Новая
       4

Какой лучший способ найти указанный столбец c в amCharts XYChart?

0 голосов
/ 31 января 2020

Мне нужно инициировать наведение указателя c на столбец и / или сегмент в XYChart (amCharts). Мне удалось заставить его работать, но мне кажется, что должен быть более легкий путь.

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

Данные выглядят примерно так: 

const data = [{
  x: 'Kalle',
  value: 12,
  meta: {id: 12432341}
},{
  x: 'Nisse',
  value: 20,
  meta: {id: 54251114}
},{
  x: 'Bosse',
  value: 8,
  meta: {id: 16517346}
}]

И график строится так: 

const chart = am4core.create('chartArea', am4charts.XYChart)

// Add category axis
const xAxis = chart.xAxes.push(new am4charts.CategoryAxis())
xAxis.data = categories.map((c) => ({x: c}))
xAxis.dataFields.category = 'x'

// Add value axis
const axis = chart.yAxes.push(new am4charts.ValueAxis())

// Add column series
const series = chart.series.push(new am4charts.ColumnSeries())
series.data = data
series.dataFields.valueY = 'value'
series.dataFields.categoryX = 'x'
series.yAxis = axis
series.bullets.push(new am4charts.CircleBullet())

series.columns.template.interactionsEnabled = true
const hs = series.columns.template.states.create('hover')
hs.properties.strokeWidth = 8

const bullet = series.bullets.push(new am4charts.CircleBullet())

А затем функция, которая должна найти указанный столбец c и установить hover: 

setHover(chart, id) {
  let xPosition
  chart.series.each(series => {

    if (!xPosition) {
      const data = series.data.find(d => d.meta && d.meta.id === id)
      if (!data) {
        return
      }

      xPosition = chart.xAxes.getIndex(0).dataItems.values.findIndex(v => v.category === data.x)
    }

    const column = series.columns.getIndex(xPosition)
    if (column) {
      column.isHover = true
    }
  })
}

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

setHover(chart, id) {
  chart.series.each(series => {
    const column = series.columns.values.find(column => column.dataItem.meta.id === id)
    if (column) {
      column.isHover = value
    }
  })
}

Или это можно сделать с помощью адаптера вместо этого?

Какой самый прямой путь?

...