年度数据的 Kendo UI 数据格式

Question

我对 Kendo UI 很陌生，在理解如何格式化某些数据以及如何将其放入图表时遇到了一些麻烦。我以以下数据为例：

 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
 }
]

我想将这些数据放入折线图中，x 轴为年份，y 轴为相应的值。不同的动物将由折线图上的单独线条表示。

我已经在网上搜索了一段时间以找到此问题的答案，但找不到任何东西。如果有人能够帮助我开始解决这个问题，或者为我提供有用的教程，我将不胜感激。

Answer 1

检查这个例子，它几乎是你需要的，但你需要调整输入数据。 http://dojo.telerik.com/UnuSu/2

您可以通过以下方式调整示例中的图表以显示您的数据：

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

有关数据绑定的其他详细信息，图表配置见参考： http://docs.telerik.com/kendo-ui/controls/charts/overview

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