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

而不是使用 dataSource，您可以提供倍数 series 并给它们每个一个 data 属性。您可以在 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.

Answer 2

看看你的 jfiddle 你的问题是你试图将两个统计数组传递给数据源并希望它为你画一条线而不是你需要修改你的现有统计

 { x: 1227.35612555829, y: 6016.67309037634,  z: 6013.67309037634},

看看 http://jsfiddle.net/1sgt4810/19/

Kendo-UI 中的多个系列线

Multiple Series of Line in Kendo-UI

html

javascript

kendo-ui