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

问题描述：

enter image description here 如何使用Html5和kendo UI在折线图中绘制垂直线？任何人都可以帮我解决这个问题吗？在kendo UI中如何在折线图中绘制垂直线

垂直或水平线上？我想，有一种方法可以在'kendoui'中定义水平线。 –

仅限垂直线。我是剑道ui的新手，因此你可以简单解释一下吗？ – arun

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

答

试试这个：

// 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

/*无CIRCLE */

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

DEMO：http://jsbin.com/obuweca/29/

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

@arun：请看编辑后的代码。如果它解决了你的问题，你也可以对它投票。 –

@ Mohit Pandey感谢您的回复:)并且在此期间，我发现其他解决方案也显得太虚假，因为标签太成功了。而你的答案也有效:) – arun

答

您也可以尝试使用列图。

只是延长系列：

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

，并用一个新的领域，如dataSource.data：valueColumn。请参阅Example。

答

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

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

您可以自定义编辑行程线路：

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

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

相关推荐