Установить / удалить событие onClick отдельных точек в jQuery Plot - PullRequest
Новая
       11

Установить / удалить событие onClick отдельных точек в jQuery Plot

0 голосов
/ 30 июня 2011

Я строю график с помощью 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);

1 Ответ

0 голосов
/ 07 июля 2011

ОК, это немного взломать, но это работает. Идея состоит в том, чтобы расширить массив, определяющий точку данных, с двух элементов (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 
        }
    }
});
...