сделать диаграмму JS ярлыков кликабельными и получить детали ярлыка - PullRequest
Новая
       5

сделать диаграмму JS ярлыков кликабельными и получить детали ярлыка

0 голосов
/ 28 мая 2020

Я новичок в angular и диаграмме JS и использую angular 5. Мне нужно сделать метки диаграммы кликабельными и я должен возвращать такие детали, как индекс и имя. Я пробовал использовать getElementAtEvent(), но он возвращает только пустой массив при нажатии в любом месте диаграммы. Я просмотрел много сообщений StackOverflow, но ничего не нашел в angular. Я отметил labels красным кружком на фотографиях ниже. Заранее спасибо. 

  this.subPerf = new Chart(ctx2, {
      type: 'line',
      data: chartPerfData,
      options: {
        legend: legend,
        responsive: true,
        maintainAspectRatio: false,
        scales: scales,
        onClick: function (e) {
          var element = this.getElementAtEvent(e);
          console.log(element)
        }
      }
    })
  }
            <div class=" chart">
                <div class="chartWrapper">
                    <div class="chartAreaWrapper">
                        <div class="chartAreaWrapper2 ">
                            <canvas #subPerf></canvas>
                        </div>
                    </div>
                    <canvas #subPerfAxis height="300" width="0"></canvas>
                </div>
            </div>

data image line chart

1 Ответ

1 голос
/ 28 мая 2020

Проблема с getElementAtEvent заключается в том, что он возвращает единственный элемент диаграммы в позиции события (столбец, точка и т. Д. c.). Метка галочки не считается элементом диаграммы, поэтому вы не получите никаких данных.

Вместо этого вы можете определить свою функцию onClick следующим образом: 

onClick: event => {
  let point = Chart.helpers.getRelativePosition(event, subPerf.chart);
  let xIndex = subPerf.scales['x-axis-0'].getValueForPixel(point.x);
  let label = subPerf.data.labels[xIndex];
  console.log(label + ' at index ' + xIndex);
},

Обратите внимание на StackBlitz , в котором используется Angular 6. Надеюсь, то же самое работает и для Angular 5.

...