我有以下实现。它已实现并发挥作用。 http://dojo.telerik.com/uCIhu
但是,我想知道当等级为 data[i]<60
时是否可以更改线条颜色让它变红,data[i]>=60
把它变成蓝色。
$("#chart").kendoChart({
series: [{
name: "Grading",
color: function(point){return point.value<60 ? "red" : "blue"; },
width: 1,
size: 2,
tooltip: {
visible: true,
},
data: [81, 91, 61, 55, 59, 43, 57, 59, 66, 65, 54, 70, 72.37]}
],
seriesDefaults: {
type: "line",
missingValues: "interpolate"
},
});
最佳答案
在一条线上获得多种颜色的方法是应用渐变作为描边颜色。在您的 HTML 中的某处,您可以包含一个隐藏的 svg 元素,其中定义了渐变,例如:
<div style="height: 0px;">
<svg>
<defs>
<linearGradient id="theGrad" x1="0" x2="0" y1="0" y2="1">
<stop stop-color="blue" offset="0%"></stop>
<stop stop-color="blue" offset="40%"></stop>
<stop stop-color="red" offset="40%"></stop>
<stop stop-color="red" offset="100%"></stop></linearGradient>
</defs>
</svg>
</div>
注意:您也可以只在脚本中创建渐变定义并将其附加到图表 SVG。
然后使用图表小部件的渲染回调将渐变应用于线条:
$("#chart").kendoChart({
series: [{
name: "Grading",
color: function(point){return point.value<60 ? "red" : "blue"; },
width: 2,
size: 2,
tooltip: {
visible: true,
},
data: [81, 95, 61, 55, 59, 5, 57, 59, 66, 65, 54, 70, 72.37]}
],
seriesDefaults: {
type: "line",
missingValues: "interpolate"
},
valueAxis: {
max: 100
},
render: function(e) {
$('#chart svg g [clip-path="url(#kdef2)"] path').css("stroke", "url(#theGrad)");
}
});
不幸的是,kendo 图表没有将 id 或类应用于各种 svg 元素,因此需要反复试验/在浏览器开发人员工具中查找以找出合适的选择器。
同样对于您的实际问题,您需要根据您的实际数据范围计算适当的梯度停止。
关于javascript - 多系列线条颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30292798/