dygraph 改变线条颜色
dygraph change line color
我想更改 dygraph 图表的线条颜色
有价值。
例如当我的数据大于2时,我想改变颜色。
我尝试了选项颜色,但只是更改了点颜色。
我做了一个JsFiddle here。
这是我的选项绘图:
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;
}
如您所见,您无法将 color
设置为函数。不过,您可以使用稍微更通用的 drawPointCallback
option,它可以让您为每个点绘制任何颜色的任何形状:
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
}
}
});
这里有一个 fully-worked fiddle. See the custom-circles demo drawPointCallback
的更多例子。
我想更改 dygraph 图表的线条颜色
有价值。
例如当我的数据大于2时,我想改变颜色。
我尝试了选项颜色,但只是更改了点颜色。
我做了一个JsFiddle here。
这是我的选项绘图:
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;
}
如您所见,您无法将 color
设置为函数。不过,您可以使用稍微更通用的 drawPointCallback
option,它可以让您为每个点绘制任何颜色的任何形状:
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
}
}
});
这里有一个 fully-worked fiddle. See the custom-circles demo drawPointCallback
的更多例子。