绘图工具提示显示在折线图上，但不显示条形图

时间：2015-05-26 15:37:58

标签： javascript jquery flot

我有一组[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>

1 个答案:

答案 0 :(得分：1)

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

  

“barWidth”是以x轴为单位的条形宽度（如果“水平”为真，则为y轴），与以像素为单位指定的大多数其他度量相反。例如，对于时间序列，单位是毫秒，因此24 * 60 * 60 * 1000生成宽度为一天的条形。

我修改了你的选项并将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>

相关问题
最新问题