使用KendoUI折線圖，如何保持條形點的連接？ （參見圖片）

Question

我正在使用KendoUI替換一些DotNet圖表。 即使沒有數據，如何保持線路連接？

第一個圖表是要替換的點網圖表。 第二張圖表是KendoUI，我想保持點之間的聯系。

我的html看起來像這樣：

我的jQuery Kendo腳本如下圖所示：

jQuery('#chart').kendoChart({
    title: {
        text: "Overall Score out of 100",
        align: "left",
        font: "18px Arial, Verdana, sans-serif"
    },
    seriesDefaults: {
        type: "line"
    },
    legend: {
        position: "bottom"
    },
    tooltip: {
        visible: true,
        format: "{0}%"
    },
    valueAxis: {
        min: 70,
        max: 85,
        plotBands: [{
            from: 70,
            to: 75,
            color: "#EDF5FF"},
        {
            from: 80,
            to: 85,
            color: "#EDF5FF"}]
    },
    series: [{
        name: "Some Product",
        color: "004990",
        tooltip: {
            visible: true,
            template: "<b>Some Product *</b><br/>Current Score: #= value #<br/>#= category # "
        },
        data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
    {
        name: " Some Market Segmemt",
        color: "da7633",
        tooltip: {
            visible: true,
            template: "<b> Some Market Segment</b><br/>Current Score: #= value #<br/>#= category # "
        },
        data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
    categoryAxis: {
        labels: {
            rotation: -45
        },
        categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
    }
});

這是指向JSFittle項目的鏈接，其中包含要使用的圖形： http : //jsfiddle.net/rodneyhickman/uMTnh/1/

Answer 1

在這里，您可以： http : //jsfiddle.net/LyndsySimon/KJuDe/

您需要在系列配置中使用missingValues: 'interpolate'選項。

我在Kendo文檔的以下頁面上找到了這個答案： http : //www.kendoui.c​​om/documentation/dataviz/chart/configuration.aspx

編輯：某種程度上，我沒有看到您的配置。 在這里，補上所有系列的空白-

jQuery('#chart').kendoChart({
title: {
    text: "Overall Score out of 100",
    align: "left",
    font: "18px Arial, Verdana, sans-serif"
},
seriesDefaults: {
    type: "line",
    missingValues: "interpolate"
},
legend: {
    position: "bottom"
},
tooltip: {
    visible: true,
    format: "{0}%"
},
valueAxis: {
    min: 70,
    max: 85,
    plotBands: [{
        from: 70,
        to: 75,
        color: "#EDF5FF"},
    {
        from: 80,
        to: 85,
        color: "#EDF5FF"}]
},
series: [{
    name: "Some Product",
    color: "004990",
    tooltip: {
        visible: true,
        template: "<b>Some Product *</b><br/>Current Score: #= value #<br/>#= category # "
    },
    data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
{
    name: " Some Market Segmemt",
    color: "da7633",
    tooltip: {
        visible: true,
        template: "<b> Some Market Segment</b><br/>Current Score: #= value #<br/>#= category # "
    },
    data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
categoryAxis: {
    labels: {
        rotation: -45
    },
    categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
}
});