Question

之前有一个问题here，但我需要对答案进行澄清，并且没有足够的评论意见。分页用户@Maya Sol。

我正在尝试重新创建她的答案，但是我没有成功，我想知道我要去哪里错了。

from django import forms
from django.contrib.admin import widgets
from django.utils import timezone
from django.forms.widgets import TimeInput

from .models import Occupancy


class UltraDateInput(forms.DateInput):
    input_type = 'date'


class UltraTimeInput(TimeInput):
    input_type = 'time'


class OccupancyForm(forms.ModelForm):
    occupancy_date = forms.DateField()
    start_time = forms.TimeField()
    end_time = forms.TimeField()

    class Meta:
        model = Occupancy
        exclude = ['user', 'start', 'end']
        fields = ['occupancy_date', 'start_time', 'end_time', 
                 'notes']
        widgets = {
            'occupancy_date': UltraDateInput(),
            'start_time': UltraTimeInput(),
            'end_time': UltraTimeInput()
        }

我没有任何错误，可以看到图例标题，但是图例中没有内容。

Answer 1

组件模板和相关功能：

<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);
    }
);

Angular NGX图：使用自定义图例

1 个答案: