검도 UI 차트에서 "verticalRangeArea"와 꺾은 선형 차트를 어떻게 조합 할 수 있습니까? 내가 필요로 무엇

이 이미지로 차트를 구축하는 것입니다 : 나는 시리즈 "verticalRangeArea"와 "scatterLine"의 두 가지 유형을 결합하여이 작업을 수행하기 위해 노력하고있어 검도 UI 차트에서 "verticalRangeArea"와 꺾은 선형 차트를 어떻게 조합 할 수 있습니까? 내가 필요로 무엇

. 어떤 이유로 그들은 함께 일하지 않습니다.

$("#chart").kendoChart({ 
 
    valueAxis: { 
 
     min: new Date("2014/01/01 08:00").getTime(), 
 
     max: new Date("2014/01/01 17:00").getTime(), 
 
     majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds 
 
     labels: { 
 
     template: "#= kendo.toString(new Date(value), 'HH:mm') #" 
 
     } 
 
    },  
 
    series: [  
 
    { 
 
     type: "scatterLine", 
 
     
 
     data: [[new Date("2014/01/01 09:30").getTime(), 5], [new Date("2014/01/01 09:30").getTime(), 11]] 
 
    }, 
 
    { 
 
     type: "verticalRangeArea", 
 
     data: [[new Date("2014/01/01 09:00").getTime(), new Date("2014/01/01 10:00").getTime()], [new Date("2014/01/01 09:00").getTime(), new Date("2014/01/01 10:00").getTime()]],   
 
    }, 
 
    { 
 
     type: "verticalRangeArea", 
 
     data: [[new Date("2014/01/01 11:00").getTime(), new Date("2014/01/01 12:00").getTime()], [new Date("2014/01/01 11:00").getTime(), new Date("2014/01/01 12:00").getTime()]],   
 
    }],  
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"/> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
<div id="chart"></div> 
 
</body> 
 
</html>

출처

2017-12-15 Vitach

은 왜 플롯 밴드를 사용합니까? https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.plotBands – ezanker

플롯 밴드를 사용하려고했지만 vertiacalRangeArea에서 찾았습니다. 이제 다시 돌아가 봅니다. 이 아이디어. – Vitach

나는 다음 해결책에 온 :

var data = { 
 
    points: [ 
 
    [new Date("01/01/2013 01:00"), 2], 
 
    [new Date("01/01/2013 01:20"), 5], 
 
    [new Date("01/01/2013 01:30"), 3], 
 
    [new Date("01/03/2013 15:00"), 1] 
 
    ], 
 
    plotBands: [ 
 
    { from: new Date("01/01/2013"), to: new Date("01/02/2013"), name: "name1", color: "coral", opacity: 0.5 }, 
 
    { from: new Date("01/03/2013"), to: new Date("01/04/2013"), name: "name2", color: "blue", opacity: 0.5 } 
 
    ] 
 
}; 
 

 
$("#chart").kendoChart({ 
 
    zoomable: true, 
 
    series: [ 
 
    { 
 
     type: "scatterLine", 
 
     data: data.points, 
 
     color: "red", 
 
     width: 2 
 
    } 
 
    ], 
 
    xAxis: { 
 
    type: "date", 
 
    plotBands: data.plotBands, 
 
    name: "xAxis", 
 
    baseUnit: "hours", 
 
    min: new Date("01/01/2013"), 
 
    max: new Date("01/04/2013"), 
 
    crosshair: { 
 
     tooltip: { 
 
     visible: true, 
 
     background: "#ff6800", 
 
     format: "{0:dd/MM/yyyy HH:mm}" 
 
     }, 
 
     visible: true 
 
    } 
 
    }, 
 
    
 
    render: function(e) { 
 
    var plotBands = data.plotBands; 
 
    var xAxis = e.sender.getAxis("xAxis"); 
 
    var group = new kendo.drawing.Group(); 
 
    for(var i = 0; i < plotBands.length; i++) { 
 
     var slot = xAxis.slot(plotBands[i].from); 
 
     var labelPos = [slot.origin.x + 10, 20 ]; 
 
     var label = new kendo.drawing.Text(plotBands[i].name, labelPos, { 
 
     fill: { 
 
      color: "black" 
 
     }, 
 
     font: "18px Arial,Helvetica,sans-serif" 
 
     }); 
 
\t \t \t group.append(label); 
 
    } 
 
    e.sender.surface.draw(group); 
 
    } 
 
    
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"/> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="chart"></div> 
 
</body>

출처

2017-12-20 03:18:33 Vitach

검도 UI 차트에서 "verticalRangeArea"와 꺾은 선형 차트를 어떻게 조합 할 수 있습니까? 내가 필요로 무엇

답변

관련 문제