Kendo UI Datenformat für jährliche Daten

Question

Ich bin ziemlich neu in Kendo UI, und habe einige Probleme zu verstehen, wie man einige Daten formatiert, und wie man es in ein Diagramm bekommt. Ich habe folgende Daten als Beispiel:

var animals = [ 
{ 
    "Animal": "Dog", 
    "2017": 100, 
    "2018": 120, 
    "2019": 130 
}, 
{ 
    "Animal": "Cat", 
    "2017": 50, 
    "2018": 40, 
    "2019": 10 
}, 
{ 
    "Animal": "Mouse", 
    "2017": 10, 
    "2018": 20, 
    "2019": 80 
}, 
{ 
    "Animal": "Pig", 
    "2017": 40, 
    "2018": 45, 
    "2019": 50 
}, 
{ 
    "Animal": "Cow", 
    "2017": 80, 
    "2018": 65, 
    "2019": 60 
} 
] 

ich diese Daten in einem Liniendiagramm erhalten möchten, mit den Jahren entlang der x-Achse und der entsprechende Wert auf der y-Achse. Die verschiedenen Tiere würden durch einzelne Linien auf dem Liniendiagramm dargestellt.

Ich habe das Internet für eine Weile gesucht, um eine Antwort zu finden, aber ich konnte nichts finden. Wenn mir jemand helfen könnte, mit diesem Thema anzufangen oder auf ein hilfreiches Tutorial zu verweisen, würde ich es sehr schätzen.

Answer 1

Überprüfen Sie dieses Beispiel, es ist fast das, was Sie brauchen, aber Sie müssen die Eingabedaten anpassen. http://dojo.telerik.com/UnuSu/2

Hier ist, wie Sie das Diagramm in der Probe einstellen könnten Ihre Daten anzuzeigen:

function createChart() { 
    $("#chart").kendoChart({ 
     title: { 
      text: "Your title" 
     }, 
     seriesDefaults: { 
      type: "line" 
     }, 
     series: [{ 
      name: "Dog", 
      data: [100, 120, 130] 
     }, { 
      name: "Cat", 
      data: [50, 40, 10] 
     }, { 
      name: "Mouse", 
      data: [10, 20, 80] 
     },{ 
      name: "Pig", 
      data: [40, 45, 50] 
     },{ 
      name: "Cow", 
      data: [80, 65, 60] 
     }], 
     categoryAxis: { 
      categories: [2017, 2018, 2019] 
     }, 
     tooltip: { 
      visible: true, 
      format: "{0}%", 
      template: "#= series.name #: #= value #" 
     } 
    }); 
} 

$(document).ready(createChart); 
$(document).bind("kendo:skinChange", createChart); 

Für weitere Einzelheiten bezüglich Datenbindung, Diagramme Konfiguration siehe Referenz: http://docs.telerik.com/kendo-ui/controls/charts/overview

http://docs.telerik.com/kendo-ui/controls/charts/overview#see-also