ChartKick - ChartJs - легенда onClick переопределяет поведение по умолчанию

avatar
Aniruddha
7 апреля 2018 в 22:27
1586
1
0

В моем приложении VueJs я представляю круговую диаграмму и таблицу, показывающую данные. В легенде onClick я пытаюсь отфильтровать строки таблицы. Вот мой код 

          <pie-chart
            :donut="false"
            :data="charInfo"
            :responsive="true"
            :library="{legend:{display: true,onClick:itemSelected}}"
            legend="top"
            :colors="['#5C9AFF', '#FF3263']"/>

Здесь, нажав на конкретную легенду, 'itemSelected' вызывается с двумя аргументами, 1-й - это mouseEvent, а 2-й - legendItem. Я могу получить текст легенды и фильтровать строки таблицы. Но проблема в том, что он переопределяет поведение по умолчанию, зачеркивание легенды и скрытие/отображение раздела круговой диаграммы отключено. При поиске наткнулся ChartJs Legend onClick Issue. В нем говорится хранить исходную легенду о событии onClick и вызывать ее из моего кода. Я могу сохранить исходный onClick, используя что-то вроде «const original = Chart.defaults.pie.legend.onClick», но проблема в том, что у меня нет объекта диаграммы для вызова «original.call(,event,legendItem). И тут я как-то застрял.

Источник

Ответы (1)

avatar
Paul Marshall
10 июля 2018 в 16:12
0

Я ходил по кругу, пробуя различные реализации, чтобы решить эту проблему для себя, используя ng2-charts (кстати, именно так я нашел этот вопрос). В итоге я добавил @ViewChild для ссылки на мою диаграмму, которая была определена в html.

ссылки, необходимые в TS для этого обходного пути:

import { Component, Input, Host, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
import { ChartsModule, BaseChartDirective } from 'ng2-charts';

добавлен в топ моего класса в ts:

export class StatisticsComponent implements OnInit, OnDestroy {

  @ViewChild('myChart') myChart : BaseChartDirective;

HTML-объект для диаграммы с использованием ng2-charts:

<canvas *ngIf = "loaded" 
        baseChart
        #myChart = 'base-chart'
        [datasets]="chartData"
        [colors]="chartColors"
        [chartType]="'line'"      
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]="true"
        (chartClick)="onChartClick($event)">
    </canvas>

В методе, который вы затем используете для переопределения легенды onClick (я лично сделал это в chartOptions), вы можете добавить эту строку кода:

this.chart.data.datasets[legendItem.datasetIndex].hidden = !this.chart.data.datasets[legendItem.datasetIndex].hidden;
this.chart.update();

Это повторяет стандартный "onClick" элемента легенды, поэтому вам не нужно сохранять исходную функцию. Вероятно, важно упомянуть, что в этом коде legendItem является вторым параметром onClick (первым является событие): 

function(e: any, legendItem: any)

Единственная проблема с этим исправлением заключается в том, что по умолчанию в ng2-charts скрытый артибут не отображается по умолчанию, поэтому мне пришлось немного взломать модуль, следуя этому методу: https://github.com/valor-software/ng2-charts/issues/915.

Я понимаю, что ваш вопрос не относится к диаграммам ng2. Я предполагаю, что вы, вероятно, могли бы использовать аналогичный метод в своей обертке. По крайней мере, я решил, что после того, как мне удалось решить свою проблему, я поделюсь с вами тем, что я сделал :)

Aniruddha
5 декабря 2018 в 18:39
0

У меня сейчас нет этого кода, поэтому я не могу проверить и дать вам пример кода. Но на самом деле я перестал показывать легенду ChartJS и добавил свой собственный компонент пользовательского интерфейса. А потом обновлял набор данных. Я знаю, это было не очень красивое решение, но мне нужно было урегулировать дату доставки. Но ваше решение намного элегантнее моего.