Kendo UI Dataviz: сравнение нескольких серий линий (сравнительная линейная диаграмма)

Мне нужно визуализировать разницу в плане и фактический прогресс, как в любой простой линейной диаграмме сравнения.

Я написал (демонстрация Dojo):

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

Я получил это:

сравните график с проблемой

Но я ожидаю что-то похожее на это:

ожидаемый график сравнения

Есть идеи?


javascript kendo-ui kendo-dataviz
person Iman Mahmoudinasab    schedule 03.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

type для серий должен быть scatterLine, а не line: (финальная демонстрация)

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,
    }
  });
}
person Iman Mahmoudinasab    schedule 04.01.2016