javascript - Kendo-UI 中的多系列线

Question

我想绘制两个数据集(stats 和 stats2)。

我可以绘制一个系列(统计数据)，

dataSource: {  data: stats},

http://jsfiddle.net/1sgt4810

但是当我添加第二个时，它没有绘制。

dataSource: {  data: stats, stats2 },

http://jsfiddle.net/1sgt4810/2/

我知道可以选择如下操作

                      series: [{
                            type: "line",
                            field: "y",
                            categoryField: "x",
                            name: "Path1",
                            style: "smooth",
                            data: stats,
                            markers: {
                             visible: false
                          }
                        }, {
                            type: "line",
                            field: "y",
                            categoryField: "x",
                            name: "Path2",
                            style: "smooth",
                            data: stats2,
                            markers: {
                             visible: false
                          }
                        }],

因为将来我会有很多行，我需要知道如何以模块化的方式处理多行。

Answer 1

选项 1

您可以提供多个series，并为每个系列赋予一个data 属性，而不是使用dataSource。您可以在 Kendo UI's site 的示例中看到这一点.

series: [{
    name: "Path1",
    //other properties
    data: stats
}, {
    name: "Path2",
    //other properties
    data: stats2
}],

这是an updated fiddle显示两行。我不相信没有多个系列就可以做到这一点。

选项 2

如果你想将这些行合并为一行，你可以像这样连接数组:

dataSource: [].concat(stats, stats2)

这是a fiddle为此。

选项 3

另一种可能性是根据您拥有的数组数量生成系列。例如:

series: [ stats, stats2 ].map(function (data, idx) {
    return {
        type: "line",
        field: "y",
        categoryField: "x",
        name: "Path" + (idx + 1),
        style: "smooth",
        data: data,
        markers: {
            visible: false
        }
    };
})

您可以看到here .