Получение значений x, y из события щелчка диаграммы

Question

Получение значений x, y из события щелчка диаграммы

0

Я использую ng2-диаграммы, чтобы создать линейную диаграмму с несколькими кликабельными точками. Когда я нажимаю точку, запускается событие щелчка - здесь метод:

public chartClicked(e: any): void {
    console.log('Clicked: ' + e);
}

и вот мой график HTML:

<div class="col-md-6">
    <base-chart id="lineChart" class="chart"
                [datasets]="chartData"
                [labels]="chartLabels"
                [colors]="chartColours"
                [legend]="chartLegend"
                [chartType]="chartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>
</div>

К сожалению, документация по ng2-диаграммам не объясняет, как фактически использовать переменную "e" (из того, что я видел). Я хотел бы получить значения x и y из точки щелчка - кто-нибудь знает, как это сделать?

Roka545 03 июнь 2016, в 00:56

Источник

1

Вы пробовали просто смотреть на значения внутри 'e' во время выполнения?
Samuel Davidson 02 июнь 2016, в 22:42
0

Это даже действительный JS? Похоже, еще один язык на основе классов.
Phillip Chan 02 июнь 2016, в 22:45
0

Инструменты разработчика Chrome показывают 'e' как [объектный объект]. Ничего не выскакивает, когда я пытаюсь набрать оператор точки - «е».
Roka545 02 июнь 2016, в 22:45
0

Метод chartClicked был скопирован из ng2-диаграмм. Эта функция находится внутри файла .ts TypeScript в экспортируемом классе (класс экспорта Home {...})
Roka545 02 июнь 2016, в 22:47
1

@ Roka545, это действительно странно, так что это пустой объект? Инструменты Chrome Dev должны позволить вам расширить его и увидеть его свойства?
Samuel Davidson 02 июнь 2016, в 22:48
0

Хорошо - кажется, что вы не можете раскрыть объект, когда он добавлен в операторе печати, как у меня в моем методе. Я просто сделал console.log (e) и смог развернуть и увидеть свойства объекта.
Roka545 02 июнь 2016, в 22:53

Показать ещё 4 комментария

Теги:

angular

javascript

html

angularjs

chart.js

1 ответ

Ещё вопросы

Вы пробовали просто смотреть на значения внутри 'e' во время выполнения?
Это даже действительный JS? Похоже, еще один язык на основе классов.
Инструменты разработчика Chrome показывают 'e' как [объектный объект]. Ничего не выскакивает, когда я пытаюсь набрать оператор точки - «е».
Метод chartClicked был скопирован из ng2-диаграмм. Эта функция находится внутри файла .ts TypeScript в экспортируемом классе (класс экспорта Home {...})
@ Roka545, это действительно странно, так что это пустой объект? Инструменты Chrome Dev должны позволить вам расширить его и увидеть его свойства?
Хорошо - кажется, что вы не можете раскрыть объект, когда он добавлен в операторе печати, как у меня в моем методе. Я просто сделал console.log (e) и смог развернуть и увидеть свойства объекта.

Samuel Davidson · Accepted Answer · 2016-06-02T21-53-00.000Z

Глядя на демограммы Angular2 Chart, я заметил следующее:

e является контейнером для: а) щелчка элементов диаграммы и b) клика мыши.

e = {
  active: chartData[],
  event: MouseEvent
}

Поэтому, поскольку он выглядит обычным старым MouseEvent, вы можете сделать следующее, чтобы получить позицию на диаграмме:

var x:number = e.event.layerX;
var y:number = e.event.layerY;

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

Спасибо за ответ. Использование этого кода не возвращает ожидаемых значений диаграммы - на самом деле цифры далеко не верны. Я сделал Ctrl-F в инструментах разработчика Chrome и ни в одном из значений x или в возвращенном объекте 'e'. Также я могу ошибаться, но может ли e.event.layerX / Y вернуть координаты мыши, а не значения диаграммы?
О, я думал, что это то, о чем спрашивал твой вопрос, позиция щелчка на графике. Хорошо, тогда посмотрите на массив точек данных в том же событии. Это должно иметь его значение на графике.
Разобрался - проще, чем я думал. Внутри возвращаемого объекта при нажатии / наведении («e» в фрагменте кода выше) они являются « индексной» записью - этот индекс соответствует индексу перемещенной точки. Вот структура объекта, в которой я нашел ее в инструментах разработчика Chrome: * Object {event: MouseEvent, active: Array [1]} * active: Array [1] * 0: i * _chart: t ..... __index: 6