如何将“verticalRangeArea”与Kendo UI Chart中的折线图组合？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将“verticalRangeArea”与Kendo UI Chart中的折线图组合？相关的知识，希望对你有一定的参考价值。
我需要的是在这张图片上构建图表：
我试图通过组合两种类型的系列“verticalRangeArea”和“scatterLine”来做到这一点。出于某种原因，他们没有一起工作。
$("#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>答案
我来到下一个解决方案：
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"
});
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>以上是关于如何将“verticalRangeArea”与Kendo UI Chart中的折线图组合？的主要内容，如果未能解决你的问题，请参考以下文章
如何将excel文件类型（xlsx）与iPhone应用程序相关联
如何使用 CPACK_PACKAGE_INSTALL_REGISTRY_KEY 添加注册表项？