привязка диаграммы Морриса Пончик

Question

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

public class Customer { 

    private Long id; 

    private String name; 

    private String email; 

    private Address address; 

//+ constructors + getter and setters 

и класс, называемый адрес:

public class Address { 

    private Long id; 

    private String country; 

    private String city; 

    private String street; 

    private String zip; 

//+ constructors + getter and setters 

У меня есть контроллер Rest, который возвращает все клиенты в БД:

1: { 
    id: 2 
    name: "Sydney Garrett" 
    email: "lacinia@nuncQuisqueornare.edu" 
    address: { 
      id: 38 
      country: "Spain" 
      city: "Madrid" 
      street: "P.O. Box 318, 7554 Natoque Avenue" 
      zip: "92394" 
      } 
    } 
2: { 
    id: 3 
    name: "Peter Phillips" 
    email: "Nulla@sodales.org" 
    address: { 
      id: 78 
      country: "Spain" 
      city: "Vigo" 
      street: "6967 Id, Av." 
      zip: "11498" 
    } 
} 

Теперь, Я хочу связать Morris Donut с названием города и количеством клиентов из каждого города (например: Madrid 20, Vigo 12, Barcelona 30)

Я пытаюсь сделать что-то вроде этого в коде JS:

$.getJSON('http://localhost:8080/spring/customers/all', function(data){ 

    Morris.Donut({ 
     element: 'morris-donut-chart', 
     data: data 
     }) 

Но я не знаю, как готовить, что данные (кол-клиентов от каждого города) в коде JS. Любое предложение?

Answer 1

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

public class DonutGraphDataPoint 
{ 
    public string label { get; set; } 
    public int value { get; set; } 
} 

Таким образом, вам придется манипулировать вашими данными, чтобы каждый ярлык был вашим городом, и каждое значение - ваш счет.

Так как только вы его реализации, результат в формате JSON, который возвращается к Моррис должен выглядеть следующим образом:

[{"label":"Madrid","value":20}, 
{"label":"Vigo","value":12}, 
{"label":"Barcelona","value":30}]