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

Posted 2023-02-22

【中文标题】使用 KendoUI 折线图，如何保持条形点连接？ （见图片）

【英文标题】：Using KendoUI Line Chart, How can keep bar dots connected? (See Image)

【发布时间】：2012-04-29 05:35:52

【问题描述】：

我正在使用 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/

【参考方案1】：

给你：http://jsfiddle.net/LyndsySimon/KJuDe/

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

我在剑道文档的这个页面上找到了这个答案：http://www.kendoui.com/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"]

);