Как отобразить объект Json на диаграмме js, состоящей из списков, созданных с использованием Django rest framework в приложении angular - PullRequest
Новая
       62

Как отобразить объект Json на диаграмме js, состоящей из списков, созданных с использованием Django rest framework в приложении angular

0 голосов
/ 06 августа 2020

Я отправляю объект json, созданный с использованием Django rest framework, для отображения на диаграмме с помощью Chart js в приложении angular.

Json: 

[{"data": "[5908, 3793, 3002, 2049, 1907]", "labels": "['0005', '0022', '0003', '0135', '0061']"}]

В приложении angular я вызываю api, чтобы получить json выше, и пытаюсь отобразить на диаграмме, как показано ниже: 

import { PieData } from '@modules/charts/models/charts.model';
import { Chart } from 'chart.js';

@Component({
   selector: 'sb-charts-pie',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './charts-pie.component.html',
   styleUrls: ['charts-pie.component.scss'],
})
export class ChartsPieComponent implements OnInit {
 @ViewChild('myPieChart') myPieChart!: ElementRef<HTMLCanvasElement>;
chart!: Chart;

url = 'http://localhost:7000/products';
httpHeaders = new HttpHeaders({ 'Content-type': 'application/json' });
Data: number[] = [];

Labels: string[] = [];

constructor(private httpClient: HttpClient) {}
ngOnInit() {
    this.httpClient
        .get<PieData[]>(this.url, {
            headers: this.httpHeaders,
        })
        .subscribe(result => {
            result.forEach(x => {
                this.Data.push(x.data);
                this.Labels.push(x.labels);
                console.log(this.Data);
            });
            this.chart = new Chart(this.myPieChart.nativeElement, {
                type: 'pie',
                data: {
                    labels: this.Labels,
                    datasets: [
                        {
                            data: this.Data,
                            backgroundColor: 'blue',
                        },
                    ],
                },
            });
        });
    }
}

Класс модели для PieData как показано ниже: 

export class PieData {
  data!: number;
  labels!: string;
}

Журнал консоли для this.Data и this.Labels отображается, как показано ниже: 

  ["[5908, 3793, 3002, 2049, 1907]"]

  ["['0005', '0022', '0003', '0135', '0061']"]

Django код остальной платформы (на стороне сервера), как показано ниже:

model.py: 

class Products(models.Model):
      data = models.TextField()
      labels= models.TextField()

serializers.py: 

class ProductSerializer(serializers.ModelSerializer):
class Meta:
    model = Products
    fields = ('data',
              'labels'
              )

view.py: 

def products(request):
    labels = []
    data = []

    products = GetSQLData('db', 'query')
    for product in products:
        labels.append(product.ProdID)
        data.append(product.TotalCount)

    if request.method == 'GET':
        objects_list = []

        d = collections.OrderedDict()
        d['data'] = data
        d['labels'] = labels
        objects_list.append(d)

    products_serializer = ProductSerializer(objects_list, many=True)
    return JsonResponse(products_serializer.data, safe=False)

Как отобразить приведенные выше данные в графике js? Пожалуйста, помогите !!

1 Ответ

0 голосов
/ 06 августа 2020

При присвоении ваших данных Data и Labels, вы должны проанализировать строку в array, используя JSON.parse().

Вместо этого ... 

result.forEach(x => {
  this.Data.push(x.data);
  this.Labels.push(x.labels);
});

сделать так: 

result.forEach(x => {
  this.Data = JSON.parse(x.data);
  this.Labels = JSON.parse(x.labels);
});
...