在剑道 UI 中如何在折线图中绘制垂直线

Posted 2023-05-07

【中文标题】在剑道 UI 中如何在折线图中绘制垂直线

【英文标题】：In kendo UI how to draw vertical line in a line chart

【发布时间】：2014-03-27 15:35:28

【问题描述】：

如何使用 html5 和 kendo UI 在折线图中绘制垂直线？谁能帮我解决这个问题？

【问题讨论】：

垂直线还是水平线？我认为，有一种方法可以在kendoui 中定义水平线。

仅垂直线。我是剑道 ui 的新手，所以你能简单解释一下吗？

我认为，在kendoui（在图表中间）绘制垂直线是不可能的，但正如我所说，水平线可以用plotbands 绘制。你能告诉我为什么你需要一条垂直线，例如。

如果我有一个折线图，其垂直列为 10,20,30，..... 水平列与月份说 jan 到 dec，然后再从 jan 到 dec 进行分离，我需要一个带有某种颜色的垂直线。

我已经添加了我想要的示例图像@Mohit Pandey

【参考方案1】：

试试这个：

// let chart be the id
$("#chart").kendoChart(
     categoryAxis: 
         notes: 
             line: 
                 length: 300
             ,
             data: [
                 value: new Date(2012, 0, 3),
                 label: 
                     text: "-" //text you want to show
                  
             ]
         
     
 );

演示：http://jsbin.com/obuweca/26

/* 没有圆圈 */

$("#chart").kendoChart(
    categoryAxis: 
        notes: 
            line: 
                length: 300
            ,
            icon: 
                border: 
                    width: 0
                
            ,
            // Initial notes
            data: [
                value: new Date(2012, 0, 3)
            ]
        
    
);

演示：http://jsbin.com/obuweca/29/

【讨论】：

正如您所说，这很好用，谢谢:) 但是在垂直线的顶部放置了一个圆圈，对吗？我们放在那里的任何文本都会显示出来。但我不想显示圆圈，而只是垂直线对我来说就足够了？？？你能帮忙吗？

@arun：请查看编辑后的代码。如果它解决了您的问题，您也可以对其进行投票。

@Mohit Pandey 感谢您的回复 :) 同时我发现其他解决方案对于太有效的标签来说太明显了。你的回答也有效:)

【参考方案2】：

在剑道文档中是如何在图表上绘制自定义线条的示例。水平和垂直。

http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands

您可以通过编辑笔画来自定义线条：

 stroke: 
          color: "red",
          width: 1,
          dashType:"dash"
        

【参考方案3】：

您也可以尝试使用柱状图。

只是扩展系列：

  series: [
                type: "line",
                field: "value",
                categoryField: "date"
            ,
            
                type:"column", 
                field: "valueColumn", 
                gap: 300
            ]

以及带有新字段的 dataSource.data，例如：valueColumn。

另请参阅Example。