Set/remove onClick event of separate points in jQuery Plot
I'm plotting a graph with jQuery Plot. The graph contents 2 lines with points. I set the the option 'clickable'
in grid on true. It makes all points clickable.
The question is how can I set only separate points clickable?
Here is my code:
d1 = [[889.0, y_max], [905.0, y_max], [915.0, y_max], [935, y_max]];
d2 = [[885.0, 0.4], [905.0,开发者_如何学编程 0.6], [915.0, 0.34], [935, 0.39]];
options = {
yaxis: { min: y_min, max: y_max },
grid: { hoverable: true,
clickable: true,
borderWidth: 0 },
legend: {
show: true,
noColumns: 4,
container: $("#labeler"),
labelFormatter: function (label, series) {
var cb = label;
return cb;
}
}
};
ed_data = [
{ data: d1,
points: { show: true, symbol: "diamond" },
lines: { show: false },
color: "#FF0000"
},
{ label: "Serie 1",
data: d2,
points: { show: true,
symbol: "triangle" },
lines: { show: true,
lineWidth: 1 }
}];
pl = $.plot($("#placeholder_top"), ed_data, options);
OK, this is a bit of a hack, but it works. The idea is to expand the array that defines a data point from two elements (x
and y
) to three (x
, y
, and clickable
). So you'd define your data something like this:
d2 = [[885.0, 0.4], [905.0, 0.6, true], [915.0, 0.34, false], [935, 0.39, true]];
The first point won't be clickable (its third element is undefined
), the second and fourth will be (the third element for both is set to true
), the third point won't be clickable (its third element is false
).
Now, when you bind a plotclick
event, you can easily filter out the items you won't respond to:
$("#chart").bind("plotclick", function (event, pos, item) {
if (item) {
var dataPoint = item.series.data[item.dataIndex];
if (dataPoint[2]) {
// respond to the click
}
}
});
精彩评论