在kendo UI中如何在折線圖中繪製垂直線

Question

如何使用Html5和kendo UI在折線圖中繪製垂直線？任何人都可以幫我解決這個問題嗎？

Answer 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

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

Answer 2

您也可以嘗試使用列圖。

只是延長系列：

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

，並用一個新的領域，如dataSource.data：valueColumn。請參閱Example。

Answer 3

在kendo文檔是示例如何在圖表上繪製自定義線條。水平和垂直。

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

您可以自定義編輯行程線路：

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