javascript - Flot 工具提示出现在折线图上而不是条形图上

Question

我有一组 [Moment, integer] 对，我正在使用 flot 在图表中绘制它们。当我将数据绘制为条形图时，工具提示没有出现。

但是，如果我显示点，或者如果我将图表转换为折线图，则会出现工具提示。

如以下代码片段所示，我实际上使用的是 flot 示例代码。绘制为条形图时，可能导致工具提示无法显示的原因是什么？可编辑的 JSFiddle 可用 here .

var people_count_data = [
  [moment("2015-05-26T09:15:00+00:00"), 0],
  [moment("2015-05-26T09:30:00+00:00"), 0],
  [moment("2015-05-26T09:45:00+00:00"), 0],
  [moment("2015-05-26T10:00:00+00:00"), 0],
  [moment("2015-05-26T10:15:00+00:00"), 0],
  [moment("2015-05-26T10:30:00+00:00"), 0],
  [moment("2015-05-26T10:45:00+00:00"), 0],
  [moment("2015-05-26T11:00:00+00:00"), 0],
  [moment("2015-05-26T11:15:00+00:00"), 0],
  [moment("2015-05-26T11:30:00+00:00"), 0],
  [moment("2015-05-26T11:45:00+00:00"), 2],
  [moment("2015-05-26T12:00:00+00:00"), 51],
  [moment("2015-05-26T12:15:00+00:00"), 59],
  [moment("2015-05-26T12:30:00+00:00"), 72],
  [moment("2015-05-26T12:45:00+00:00"), 23],
  [moment("2015-05-26T13:00:00+00:00"), 50],
  [moment("2015-05-26T13:15:00+00:00"), 55],
  [moment("2015-05-26T13:30:00+00:00"), 52],
  [moment("2015-05-26T13:45:00+00:00"), 53],
  [moment("2015-05-26T14:00:00+00:00"), 39],
  [moment("2015-05-26T14:15:00+00:00"), 50],
  [moment("2015-05-26T14:30:00+00:00"), 51],
  [moment("2015-05-26T14:45:00+00:00"), 55],
  [moment("2015-05-26T15:00:00+00:00"), 39],
  [moment("2015-05-26T15:15:00+00:00"), 12],
  [moment("2015-05-26T15:30:00+00:00"), 0],
  [moment("2015-05-26T15:45:00+00:00"), 0],
  [moment("2015-05-26T16:00:00+00:00"), 0],
  [moment("2015-05-26T16:15:00+00:00"), 0],
  [moment("2015-05-26T16:30:00+00:00"), 0],
  [moment("2015-05-26T16:45:00+00:00"), 0],
  [moment("2015-05-26T17:00:00+00:00"), 0],
  [moment("2015-05-26T17:15:00+00:00"), 0],
];

var plotOptions = {
  //Options go here
  xaxis: {
    mode: "time",
    reserveSpace: true,
    tickLength: 5,
    autoscaleMargin: 0.01
  },
  yaxis: {
    min: 0
  },
  grid: {
    hoverable: true,
    clickable: true
  },
  series: {
    // If I comment out bars and turn the chart into a line graph, tooltips work(!)
    bars: {
      show: true
    },
    // If I show the points on the bar graph, tooltips work(!)
    //    points: {
    //      show: true
    //    }
  },
};

var plot1 = $.plot(
  '#store-people-count-plot', [{
    label: "People Count",
    color: "#FC8200",
    data: people_count_data
  }], plotOptions);

function showTooltip(x, y, contents) {
  $("<div id='tooltip'>" + contents + "</div>").css({
    position: "absolute",
    display: "none",
    top: y + 5,
    left: x + 5,
    border: "1px solid #fdd",
    padding: "2px",
    "background-color": "#fee",
    opacity: 0.80
  }).appendTo("body").fadeIn(200);
}

var previousPoint = null;
var hoverCallback = function(event, pos, item) {
  if (item) {
    if (previousPoint != item.dataIndex) {
      previousPoint = item.dataIndex;
      var x_moment = moment(item.datapoint[0]);
      $("#tooltip").remove();
      var y = item.datapoint[1];
      var tooltipString = x_moment.format("HH:mm") + ", " + y;
      showTooltip(item.pageX, item.pageY,
        tooltipString);
    }
  } else {
    $("#tooltip").remove();
    previousPoint = null;
  }
};

$('#store-people-count-plot').on("plothover", hoverCallback);

#store-people-count-plot {
  width: 400px;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.3.1/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>

<div id="store-people-count-plot"></div>

Answer 1

你的酒吧太细了。如果您放大浏览器窗口并将光标悬停在栏上，则会显示工具提示。尝试使用 barwidth 加宽您的条形图选项:

"barWidth" is the width of the bars in units of the x axis (or the y axis if "horizontal" is true), contrary to most other measures that are specified in pixels. For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of a day.

我修改了您的选项并将 barWidth 设置为 10 分钟，并且工具提示有效。

var people_count_data = [
  [moment("2015-05-26T09:15:00+00:00"), 0],
  [moment("2015-05-26T09:30:00+00:00"), 0],
  [moment("2015-05-26T09:45:00+00:00"), 0],
  [moment("2015-05-26T10:00:00+00:00"), 0],
  [moment("2015-05-26T10:15:00+00:00"), 0],
  [moment("2015-05-26T10:30:00+00:00"), 0],
  [moment("2015-05-26T10:45:00+00:00"), 0],
  [moment("2015-05-26T11:00:00+00:00"), 0],
  [moment("2015-05-26T11:15:00+00:00"), 0],
  [moment("2015-05-26T11:30:00+00:00"), 0],
  [moment("2015-05-26T11:45:00+00:00"), 2],
  [moment("2015-05-26T12:00:00+00:00"), 51],
  [moment("2015-05-26T12:15:00+00:00"), 59],
  [moment("2015-05-26T12:30:00+00:00"), 72],
  [moment("2015-05-26T12:45:00+00:00"), 23],
  [moment("2015-05-26T13:00:00+00:00"), 50],
  [moment("2015-05-26T13:15:00+00:00"), 55],
  [moment("2015-05-26T13:30:00+00:00"), 52],
  [moment("2015-05-26T13:45:00+00:00"), 53],
  [moment("2015-05-26T14:00:00+00:00"), 39],
  [moment("2015-05-26T14:15:00+00:00"), 50],
  [moment("2015-05-26T14:30:00+00:00"), 51],
  [moment("2015-05-26T14:45:00+00:00"), 55],
  [moment("2015-05-26T15:00:00+00:00"), 39],
  [moment("2015-05-26T15:15:00+00:00"), 12],
  [moment("2015-05-26T15:30:00+00:00"), 0],
  [moment("2015-05-26T15:45:00+00:00"), 0],
  [moment("2015-05-26T16:00:00+00:00"), 0],
  [moment("2015-05-26T16:15:00+00:00"), 0],
  [moment("2015-05-26T16:30:00+00:00"), 0],
  [moment("2015-05-26T16:45:00+00:00"), 0],
  [moment("2015-05-26T17:00:00+00:00"), 0],
  [moment("2015-05-26T17:15:00+00:00"), 0],
];

var plotOptions = {
  //Options go here
  xaxis: {
    mode: "time",
    reserveSpace: true,
    tickLength: 5,
    autoscaleMargin: 0.01
  },
  yaxis: {
    min: 0
  },
  grid: {
    hoverable: true,
    clickable: true
  },
  series: {
    // If I comment out bars and turn the chart into a line graph, tooltips work(!)
    bars: {
      show: true,
      barWidth: 60*10*1000
    },
    // If I show the points on the bar graph, tooltips work(!)
    //    points: {
    //      show: true
    //    }
  },
};

var plot1 = $.plot(
  '#store-people-count-plot', [{
    label: "People Count",
    color: "#FC8200",
    data: people_count_data
  }], plotOptions);

function showTooltip(x, y, contents) {
  $("<div id='tooltip'>" + contents + "</div>").css({
    position: "absolute",
    display: "none",
    top: y + 5,
    left: x + 5,
    border: "1px solid #fdd",
    padding: "2px",
    "background-color": "#fee",
    opacity: 0.80
  }).appendTo("body").fadeIn(200);
}

var previousPoint = null;
var hoverCallback = function(event, pos, item) {
  if (item) {
    if (previousPoint != item.dataIndex) {
      previousPoint = item.dataIndex;
      var x_moment = moment(item.datapoint[0]);
      $("#tooltip").remove();
      var y = item.datapoint[1];
      var tooltipString = x_moment.format("HH:mm") + ", " + y;
      showTooltip(item.pageX, item.pageY,
        tooltipString);
    }
  } else {
    $("#tooltip").remove();
    previousPoint = null;
  }
};

$('#store-people-count-plot').on("plothover", hoverCallback);

#store-people-count-plot {
  width: 400px;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.3.1/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>

<div id="store-people-count-plot"></div>