Angular NGX-Charts: использование собственной легенды - PullRequest
Новая
       16

Angular NGX-Charts: использование собственной легенды

0 голосов
/ 07 января 2019

Был предыдущий вопрос здесь , но мне нужно уточнить ответ, и у меня недостаточно представителей, чтобы комментировать. Пользователь подкачки @Maya Sol.

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

<ngx-charts-legend 
    [data]="sizeByTypeNames" 
    [title]="'Legend Title'" 
    [colors]="colors" 
    [activeEntries]="activeEntries" 
    (labelActivate)="legendLabelActivate($event)"
    (labelDeactivate)="legendLabelDeactivate($event)">
</ngx-charts-legend>



this.colors = new ColorHelper(this.colorScheme, 'ordinal', this.sizeByTypeNames, this.colorScheme);

this.sizeByTypeNames: string[] = [an array of the names each legend label should have]

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

1 Ответ

0 голосов
/ 07 мая 2019

Шаблон компонента и связанные с ним функции: 

<div>
    <ngx-charts-pie-chart
        [scheme]="colorScheme"
        [results]="chart.data"
        (select)="onSelect($event)">
    </ngx-charts-pie-chart>
</div>
<div *ngIf="legend" class="chart-legend">
    <ngx-charts-legend 
        [data]="chart.legendData"
        [colors]="chart.colors"
        (labelClick)="onLabelClick($event, chart.data)">
    </ngx-charts-legend>
</div>


onLabelClick(event: any, data: any) {
    let result = data.find((obj: any) => {
        return obj.extra.displayName === event;
    })
    this.onSelect(result);
}


onSelect(event: any) {
    console.log(event);
}

Пример моего источника данных, где я получаю данные из API, а затем задаю следующие свойства диаграммы: 

chart: Chart =
    {
        title: 'Some Title',
        subtitle: 'A descriptive subtitle',
        data: this.chartData,
        legendData: [],
        colors: new ColorHelper('cool', 'ordinal', [], null),
        type: 'pie'
    }

chartData = [];

this.myService.getChartData(body).subscribe(
    result => {
        let data = result.data;
        for (let d in data) {
            let name = d;
            let val = data[d];
            let newDataPoint: NewDataPoint = {
                'name': name,
                'value': val,
                'extra': {
                    'displayName': name,
                    'displayValue': val
                }
            }
            this.chartData.push(newDataPoint);
        }
        chart.data = [...this.chartData];
        chart.legendData = chart.data.map(d => d['extra']['displayName']);
        chart.colors = new ColorHelper('neons', 'ordinal', chart.legendData, null);
    }
);
...