使用KendoUI折线图，如何保持条形点的连接？ （参见图片）

Question

I'm using KendoUI to replace some DotNet Charting Graphs. How do I keep the line connected even when there is no data?

The first chart is the Dot Net Charting which is being replaced. The second chart is the KendoUI which I'd like to keep the dots connected.

My html looks like this:

My jQuery Kendo Script for the following chart looks like:

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

This is a link to JSFittle project with the graph to play with: http://jsfiddle.net/rodneyhickman/uMTnh/1/

Answer 1

Here you go: http://jsfiddle.net/LyndsySimon/KJuDe/

You need to use the missingValues: 'interpolate' option on the series configuration.

I found this answer on this page of the Kendo documention: http://www.kendoui.com/documentation/dataviz/chart/configuration.aspx

EDIT: I didn't see your config, somehow. Here it is, patched up to fill gaps on all series -

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