2
我有一個[Moment，integer]對的數組，我使用flot在圖中繪製。當我將數據繪製爲條形圖時，工具提示不會出現。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>
謝謝。這是問題所在。 – CadentOrange