угловая диаграмма ng2: кольцевая диаграмма - как передать идентификатор метки листинга другому компоненту из функции диаграммы, по которой щелкнули - PullRequest
Новая
       29

угловая диаграмма ng2: кольцевая диаграмма - как передать идентификатор метки листинга другому компоненту из функции диаграммы, по которой щелкнули

0 голосов
/ 21 июня 2019

Я реализовал угловую кольцевую диаграмму ng2. Работает нормально. Он отображает динамические данные на графике правильно внутри графика.

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

с (chartClick) = "chartClicked ($ event)", я могу открыть модальное всплывающее окно, но не могу передать пользовательский параметр (в данном случае идентификатор отображаемой метки диаграммы или любой другой пользовательское значение / значения) из этой выбранной функции в другой компонент, где откроется модальное всплывающее окно.

Может кто-нибудь помочь мне, как передать идентификатор метки листинга, другому компоненту из функции диаграммы, на которую нажали.

введите описание изображения здесь (В этом случае, идентификатор «Агента», я хочу перейти от функции onlick.)

chart.component.ts: 

public chartClicked(e: any): void {
    if (e.active.length > 0) {
        const chart = e.active[0]._chart;
        const activePoints = chart.getElementAtEvent(e.event);
        if (activePoints.length > 0) {
        // get the internal index of slice in pie chart
        const clickedElementIndex = activePoints[0]._index;
        const label = chart.data.labels[clickedElementIndex];
        // get value by index
        const value = chart.data.datasets[0].data[clickedElementIndex];
        console.log(clickedElementIndex, label, value);

        // HOW TO PASS THE 'id' OF THE ABOVE 'label' FROM THIS FUNCTION

        // DISPLAY MODAL POPUP
        const initialState = {
          modal_title: 'Attrited Employee Levelwise information'
        };
        this.bsModalRef = this.modalService.show(
          AttritionModalContentComponent,
          {
            initialState,
            class: 'gray modal-lg'
          }
        );
        this.bsModalRef.content.closeBtnName = 'Close';
        }
    }
}

chart.component.html 

<div style="display: block">
  <canvas
    baseChart
    height="400"
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [options]="doughnutChartOptions"
    (chartClick)="chartClicked($event)"
  >
  </canvas>
</div>

NB. В функции щелчка на диаграмме я могу получить clickedElementIndex, label, value. Но я хочу перейти к «id» этой «метки» из функции onclick.

Может кто-нибудь помочь мне в этом, пожалуйста?

...