javascript - Kendo UI 数据可视化 : Comparing multiple line series (comparison line chart)

Question

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

我写道(Dojo 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: "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]
        }
    });
}

我得到了这个:

但我期望类似的东西:

有什么想法吗？

Answer 1

系列的类型应该是scatterLine而不是line:(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,
    }
  });
}