kendoui面積圖 - 垂直斜坡？

Question

我希望創建一個看起來像這樣

我得到這個至今

何才能獲得垂直邊界的山坡劍道UI區域圖？

演示http://codepen.io/lev-savranskiy/pen/GWXMJJ

{ 

    series: [{ 
     type: "line", 
     data: [100,100,86,73,66,63,59,56,55,52], 
     name: "", 
     color: "#599333", 
     axis: "perc", 

     labels: { 
      visible: true, 
      format: "{0}%", 
      background: "transparent" 
     } 

    }, { 
     type: "area", 
     opacity: 1, 
     data: [100,100,86,0,0,0,0,0,0,0], 
     name: "Glance/Delete (0-2 seconds)", 
     color: "#A3DE73", 
     axis: "time" 
    }, { 
     type: "area", 
     opacity: 1, 
     data: [0,0,86,73,66,63,0,0,0,0], 
     name: "Skim (3-7 seconds)", 
     color: "#7BC143", 
     axis: "time" 
    }, { 
     type: "area", 
     opacity: 1, 
     data: [0,0,0,0,0,63,59,56,55,52], 
     name: "Read (8-15 seconds)", 
     color: "#599333", 
     axis: "time" 
    } 


    ], 
    valueAxis: [{ 
     name: "time", 
     min: 0, 
     max: 110, 
     visible: false 
    }, { 
     name: "perc", 
     labels: { 
      template: "#= value # %" 
     }, 
     min: 0, 
     max: 110 
    }], 
    categoryAxis: { 
     categories: [0 ,2, 4, 6, 8, 10, 12, 14, 16, 18, 20], 
     labels:{ 
      template: '#= value#s' 
     }, 
     justified: true 
    } 
} 

}

描述 - 我真的不知道該怎麼在這裏添加

Answer 1

使用空，而不是0的區域系列，然後設置

missingValues: "gap", 

API：http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.missingValues

更新CODEPEN