Question

我想创建看起来像这样的kendo ui区域图表

到目前为止我得到了这个

何我得到垂直边界斜坡？

demo 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

在区域系列上使用null而不是0，然后设置

missingValues: "gap",

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

更新了 CODEPEN

kendoui地区图 - 垂直斜坡？

1 个答案: