Flot with Categories 中可点击的 xaxis 刻度线

Question

我正在使用 Flot 的类别插件。我有 xaxis 刻度线。（xaxis 列出了不同的产品。）我想让每个 xaxis 都可以点击，这样当你点击它时，就会触发一个警报，其中包含有关该 xaxis 的一些信息。

然而，当我添加一个 tickFormatter 函数时，它被完全忽略了。（我有一个工作正常的 yaxis tickformatter 函数。）我认为这是因为类别插件。

任何人都可以在 xaxis 上演示类别插件和 tickFormatter 函数。

Answer 1

尝试这样的事情：

var ticks = $('.flot-x-axis > .flot-tick-label');
ticks.css({'z-index': 100, 'cursor': 'pointer'});
ticks.click(function(){
    alert($(this).text());
});

检查这个样本here，生成的轴是：

<div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
    <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 136px; top: 395px; left: 49px; text-align: center;">January</div>
    ...

我在该页面上尝试了上面的代码，它有效。

编辑

使用 flot-tickrotor plugin 时，标签不是 div，而是 canvas 上的 "written"。试试这个：

$("#chart").bind("plotclick", function (event, pos, item) {
  var x = chart.getXAxes()[0];
  var y = chart.getYAxes()[0];
  if (pos.y < y.min) { // make sure user is clicking in XAxis
    alert(x.rotatedTicks[Math.round(pos.x)].label);
  }
});

示例 here.

Flot with Categories 中可点击的 xaxis 刻度线

Clickable xaxis ticks in Flot with Categories

flot