javascript - 用不同颜色设置绘图不同部分的背景颜色jqplot

Question

我想用不同的颜色设置图形部分的背景颜色。并且还能够使轴刻度也可单击，特别是对于 jqplot 和 flot。我已经能够用 highcharts 做到这一点。你可以看看我做了什么：http: //jsfiddle.net/fonpah/jPrvK/4/。如果有人可以用 jqplot 或 flot 做同样的事情，我将不胜感激。谢谢

Answer 1

flot 使您可以使用画布，因此您可以轻松地将代码从高图表示例转换到那里。

var plot = $.plot(...);
var ctx = plot.getCanvas().getContext("2d"); //get the canvas

var point1 = plot.pointOffset({ x: 5, y: 5}); //translate a value to pixels
var point2 = plot.pointOffset({ x: 10, y: 10}); 

//fill and draw a rectangle
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(point1.x,point1.y,point2.x,point2.y);

有关详细信息，请参阅注释示例。

Answer 2

使用 Flot，使用 {fill=true} 选项绘制填充区域非常容易，例如：

行：{显示：真，填充：真，填充颜色：“#98FB98”}，