[英]dygraph change line color
I want to change line color off a dygraph chart with value.我想更改带有值的 dygraph 图表的线条颜色。
Example when my data is greater than 2, I want to change the color.例如,当我的数据大于 2 时,我想更改颜色。
I try option color, but is change just the point color.我尝试选项颜色,但只是更改点颜色。
I make a JsFiddle here .我在这里制作了一个JsFiddle 。
This is my option dygraph:这是我的选项dygraph:
color: function (color, d) {
if (typeof d.index === 'undefined') { return color; }
var val = columns[0][d.index + 1];
if (val >= 0 && val <= 150) {
color = 'green';
} else if (val > 150 && val <= 300) {
color = 'yellow';
} else if (val > 300) {
color = 'red';
}
return color;
}
As you've discovered, you can't set color
to a function.正如您所发现的,您无法为函数设置
color
。 You can use the slightly more general drawPointCallback
option , though, which lets you draw any shape with any color for each point:不过,您可以使用稍微更通用的
drawPointCallback
选项,它可以让您为每个点绘制任何颜色的任何形状:
function coloredCircle(g, series, ctx, cx, cy, color, radius, idx) {
var y = g.getValue(idx, 1);
var pointColor = y < 5 ? 'green' : 'blue';
ctx.save();
ctx.fillStyle = pointColor;
ctx.beginPath();
ctx.arc(cx, cy, radius, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
}
g = new Dygraph(
div, data,
{
series: {
Y: {
drawPointCallback: coloredCircle,
pointSize: 5,
drawPoints: true
}
}
});
Here's a fully-worked fiddle .这是一个完整的 fiddle 。 See the custom-circles demo for more examples of
drawPointCallback
.有关
drawPointCallback
更多示例,请参阅自定义圆圈演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.