Question

我正在使用jQuery Plot绘制图形。图表内容2行有点。我在网格中设置选项'clickable'为true。它使所有点都可点击。

问题是我如何只设置可点击的单独点？

这是我的代码：

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);

Answer 1

好的，这有点像黑客，但它确实有效。我们的想法是将定义数据点的数组从两个元素（x和y）扩展为三个（x，y和clickable）。所以你要定义这样的数据：

d2 = [[885.0, 0.4], [905.0, 0.6, true], [915.0, 0.34, false], [935, 0.39, true]];

第一个点不可点击（第三个元素是undefined），第二个和第四个将是（两个的第三个元素都设置为true），第三个点赢了“可点击（其第三个元素是false）。

现在，当您绑定plotclick事件时，您可以轻松过滤掉您不会回复的项目：

$("#chart").bind("plotclick", function (event, pos, item) {
    if (item) {
        var dataPoint = item.series.data[item.dataIndex];
        if (dataPoint[2]) {
            // respond to the click 
        }
    }
});

在jQuery Plot中设置/删除单独点的onClick事件

1 个答案: