2

ここに以前の質問がありましたが、回答を明確にする必要があり、コメントするのに十分な担当者がいません。ページング ユーザー @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]

エラーは発生せず、凡例のタイトルも表示されますが、凡例にコンテンツがありません。

4

1 に答える 1

3

コンポーネント テンプレートと関連機能:

<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 からデータを取得し、これらのチャート プロパティを設定する DataSource の例:

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);
    }
);
于 2019-05-07T17:46:01.263 に答える