Можно ли вызвать директиву в диаграмме. Js?

Question

В angular JS и диаграмме. js, возможно отображать всплывающую подсказку при наведении курсора и даже вызывать функции при нажатии на панель (при условии, что вы используете гистограмму из диаграммы. js) .

Однако можно ли вызвать директиву при нажатии на гистограмму? Или я должен использовать canvas. js для этого?

Директива, на которую я ссылаюсь, является пользовательской, и она всплывает как окно, содержащее некоторые значения. Это не обязательно должна быть директива, это может быть даже компонент angular, который вы вызываете после нажатия на столбец диаграммы.

Answer 1

Мне удалось найти ответ на мой вопрос, просмотрев таблицу . js исходный код .

Предоставлено в строке 3727 диаграммы. js, Стандартная сборка, это метод .getElementAtEvent. Этот метод возвращает мне «элемент диаграммы», по которому щелкнули. Здесь достаточно данных, чтобы определить, какие данные отображать в развернутом представлении набора данных, по которому щелкнули.

В первом индексе массива, возвращенном chart.getElementAtEvent, есть значение _datasetIndex. Это значение показывает индекс набора данных, по которому щелкнули.

Специфическая строка c, по которой щелкнули, я думаю, отмечена значением _index. В моем примере в моем вопросе _index будет указывать на One в chart_config.data.labels.

Моя handleClick функция теперь выглядит следующим образом:

function handleClick(evt)
{
    var activeElement = chart.getElementAtEvent(evt);

.. где chart является ссылкой на диаграмму, созданную диаграммой. js при выполнении:

chart = new Chart(canv, chart_config);

Специфицированный c набор данных, который был выбран щелчком, может быть найден как:

chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];

И вот оно у вас. Теперь у меня есть точка данных, из которой я могу построить запрос для отображения данных панели, по которой щелкнули.

Answer 2

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

То, что я хотел, было директивой свойства, но директива свойства на самом деле не имеет кода html внутри, и она просто изменяет / добавляет Поведение DOM.

Лучший способ сделать то, что я хотел, - создать компонент и получить событие, генерируемое функцией click, добавив код (clickChart) = "chartClick ($ event)" к Canvas

<canvas myChart [datasets]="myDataSetVar" (chartClick)="chartClick($event)">

Вызовом функции chartClick и передачей события. Если вы console.log события, вы можете увидеть цвет, данные и многое другое на графике только из этого события. Вы даже можете сказать, был ли выбран набор данных.

При этом вместо использования директивы я использовал ngIf, который проверяет определенное свойство, которое становится истинным при нажатии набора данных из диаграммы. Затем я отображаю элемент DOM, когда свойство имеет значение true.

Итак, краткий ответ на мой вопрос: Нет, вы не можете использовать директиву свойства, чтобы делать то, что я хотел.

Answer 3

Это может помочь вам. Вот рабочий пример

[http://jsfiddle.net/80k0ojyh/]

let chart = Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

chart.update({
  plotOptions: {
    series: {
      events: {
        click: (event) => {
          alert('you clicked something');
        },
      },
    },
  }
});