【发布时间】：2014-11-10 15:15:06
【问题描述】：
我要求在剑道折线图中有水平线来表示最大值和最小值以及上限和下限。
【问题讨论】：
-
我得到了解决这个问题的办法。只需在图表中再添加一个线系列。这将在图表中创建一条 hr 线。我们也可以管理。
标签： javascript kendo-dataviz kendo-chart
【发布时间】：2014-11-10 15:15:06
【问题描述】：
另一种解决方案是添加plotbands。
例子：
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 89, to: 90, color: "red" }
]
}
});
</script>
【讨论】：
-
如果 Kendo 只添加一个 plotLines 选项，这样我就可以用虚线代替实线，我会很高兴 :)
通过 Kendo-chart 渲染事件处理程序添加带状线或水平线（最小/最大/平均）
我想在这里添加一个完整的解决方案，以便出于各种原因使用它。
使用剑道2015.3.1111版本，IE11/10
在添加类似于 MS-Chart 带状线的上限和下限线时，我遇到了同样的挑战。 Kendo 2015.3.1111 及之前的版本不支持此功能。
我的解决办法是
- 将 stripline 属性添加到 kendo-chart 值轴属性
- 使用渲染事件处理程序在每个值轴上绘制由 stripline 属性提供的线条
- 一个值轴（y 轴）可能有多个带状线
确保在
中有以下引用<link href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
这是带状线属性。我将级别位置的实施留给您。
valueAxis: [{
name:..
labels:{..}
stripLine: [{
value: 78,
color: "blue",
borderwidth: "1px",
//"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
dashstyle: "dot",
label: "In Max",
labelposition: "",
labelfont: "12 sans-serif"
},
{
value: 70,
color: "blue",
borderwidth: "1px",
dashstyle: "dot",
label: "In Min",
labelposition: "",
labelfont: "12 sans-serif"
}]
}
第二个重点是价值轴（y轴）的数量。 Kendo-chart“值轴”属性具有值轴或值轴数组。渲染事件处理程序应该找出对象与数组
render: function (e) {
if (e.sender.options.valueAxis.length) {
$.each(e.sender.options.valueAxis, function (i, value) {
drawStriptLine(e.sender, value);
});
}
else {
drawStriptLine(e.sender, e.sender.options.valueAxis);
}
}
您可以在下面的代码 sn-p 中看到 drawStripline。以下是有关代码的一些注释。
- 确保轴名称匹配
- axis.slot 是数据点。如果您知道您有多少个数据点，则您的数据轴从 0 开始到您的最后一个数据点编号。放一个更高的数字将返回最后一点。否则，将从 0 到您在结束槽中指定的最后一点绘制线。
- KendoChart 属性 renderAs 是可选的，但 canvas 不会引发渲染事件处理程序，因此请使用 VML 或 SVG
- Chrome（已测试版本 52.0.2743.116 m）尚不支持点划线（仅限实线），IE11/10 支持所有虚线样式
- plotBands 实现也被演示为 Render Event Handler 的替代方案
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<!--<link href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" rel="stylesheet" />-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<!--<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>-->
</head>
<body>
<div id="chart" />
<script>
var mPlotBands = [];
mPlotBands.push({
from: 60,
to: 61,
color: "red",
borderwidth: "3px",
borderstyle: "dashed",
label: "Min",
labelposition: ""
})
mPlotBands.push({
from: 95,
to: 94,
color: "red",
borderwidth: "3px",
borderstyle: "dashed",
label: "Max",
labelposition: ""
});
$("#chart").kendoChart({
renderAs: "VML", //"canvas", "SVG", "VML"
title: {
text: "Average In/Out Temperatures"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "line"
},
series: [{
name: "In Temperature",
data: [74, 74, 76, 78, 74, 70],
axis: "intemperature"
}, {
name: "Out Temperature",
data: [45, 65, 75, 95, 80, 70],
axis: "outtemperature"
}],
categoryAxis: {
name: "CategoryAxis",
categories: ["May", "June", "July", "Aug", "Sep", "Oct"]
},
valueAxis: [{
name: "intemperature",
labels: {
format: "{0}F"
},
min: 50,
max: 110,
plotBands: [],
stripLine: [{
value: 78,
color: "blue",
borderwidth: "1px",
dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
label: "In Max",
labelposition: "",
labelfont: "12 sans-serif"
}, {
value: 70,
color: "blue",
borderwidth: "1px",
dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
label: "In Min",
labelposition: "",
labelfont: "12 sans-serif"
}]
}, {
name: "outtemperature",
labels: {
format: "{0}F"
},
plotBands: mPlotBands,
stripLine: [{
value: 75,
color: "green",
borderwidth: "3px",
dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
label: "Out Avg",
labelposition: "",
labelfont: "italic 12 sans-serif"
}]
}],
render: function(e) {
if (e.sender.options.valueAxis.length) {
$.each(e.sender.options.valueAxis, function(i, value) {
drawStriptLine(e.sender, value);
});
} else {
drawStriptLine(e.sender, e.sender.options.valueAxis);
}
}
});
function drawStriptLine(chart, yaxis) {
var axis = chart.getAxis(yaxis.name);
var stripline;
$.each(yaxis.stripLine, function(i, stripline) {
// Locate value slot
var slot = axis.slot(stripline.value);
// Locate last category slot. Trying to get the last slot on the right given data x-axis plots
var categoryAxis = chart.getAxis("CategoryAxis");
var categorySlotBeg = categoryAxis.slot(0);
var categorySlotEnd = categoryAxis.slot(100000);
// Render a line element
var line = new kendo.drawing.Path({
stroke: {
color: stripline.color,
width: stripline.borderwidth,
dashType: stripline.dashstyle
}
});
line.moveTo([categorySlotBeg.origin.x, slot.origin.y]).lineTo([categorySlotEnd.origin.x, slot.origin.y]);
var labelPos = [categorySlotEnd.origin.x - 50, slot.origin.y - 20];
var label = new kendo.drawing.Text(stripline.label, labelPos, {
fill: {
color: stripline.color
},
font: stripline.labelfont
});
var group = new kendo.drawing.Group();
group.append(line, label);
chart.surface.draw(group);
});
}
</script>
</body>
</html>希望这会有所帮助。
参考文献
【讨论】：
只需在图表中再添加一个线条系列。这将在图表中创建一条 hr 线。我们也将能够管理线路位置。
【讨论】：