Jquery 年度数据的剑道用户界面数据格式

我对剑道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轴的相应值。不同的动物将在折线图上用单独的线条表示

---

我在网上搜索了一段时间，想找到这个问题的答案，但什么也没找到。如果有人能帮助我开始这个问题，或者给我指出一个有用的教程，我将不胜感激。

检查这个示例，它几乎是您所需要的，但您需要调整输入数据。

以下是如何调整示例中的图表以显示数据：

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

有关数据绑定的其他详细信息，请参阅参考：

---

虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-@戴夫：谢谢！更新了帖子。@sasha_gud-这正是对评论的正确回应。做得好。