Kendo UI Dataviz：比较多个系列（比较折线图）

Question

我需要像任何简单的比较折线图那样，将计划和实际进度中的差异视为可视化。

我写了（documentation I found）：

var plan = [
    { depth: 00, day:  0 },
    { depth: 50, day:  4 },
    { depth: 45, day:  11},
    { depth: 55, day:  16},
];
var actual = [
    { depth: 00, day: 0 },
    { depth: 55, day: 7 },
    { depth: 50, day: 11},
    { depth: 50, day: 13},
];
function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "Progress Comparision"
        },
        series: [{
            name:"Plan",
            type: "line",
            data:plan,
            field: "depth",
            categoryField: "day"
            },
            {
            name:"Actual",
            type: "line",
            data:actual,
            field: "depth",
            categoryField: "day"
        }],                      
        categoryAxis: {
            justified: true,
            categories: [0,5,10,15,20]
        }
    });
}

我明白了：

Dojo Demo

但我期待类似的事情：

任何想法？

Answer 1

系列的类型应为 scatterLine 而非行：(Final Demo)

var plan = [
  { depth: 00, day:  0 },
  { depth: 50, day:  4 },
  { depth: 45, day:  11},
  { depth: 55, day:  16},
];
  var actual = [
  { depth: 00, day: 0 },
  { depth: 55, day: 7 },
  { depth: 50, day: 11},
  { depth: 50, day: 13},
];
function createChart() {
  $("#chart").kendoChart({
    title: {
      text: "Progress Comparision"
    },
    series: [{
      name:"Plan",
      type: "scatterLine",
      data:plan,
      yField: "depth",
      xField: "day"
    },
             {
               name:"Actual",
               type: "scatterLine",
               data:actual,
               yField: "depth",
               xField: "day"
             }],                      
    xAxis: {
      justified: true,                            
      max: 20,
    }
  });
}