我正在绘制两个显示正常的时间序列行。
然后我打开了数据点的突出显示,这样我就可以提供工具提示并发现高亮环偏离实际数据点,我必须将鼠标悬停在数据点的左侧才能显示高亮环
我正在使用flot 0.8.3。
截图:
我的JS:
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
var hours_contractual = [
[gd(2017, 1, 1), 7], [gd(2017, 1, 2), 6], [gd(2017, 1, 3), 4], [gd(2017, 1, 4), 8],
[gd(2017, 1, 5), 9], [gd(2017, 1, 6), 7], [gd(2017, 1, 7), 5], [gd(2017, 1, 8), 4],
[gd(2017, 1, 9), 7], [gd(2017, 1, 10), 8], [gd(2017, 1, 11), 9], [gd(2017, 1, 12), 6],
[gd(2017, 1, 13), 4], [gd(2017, 1, 14), 5], [gd(2017, 1, 15), 11], [gd(2017, 1, 16), 8],
[gd(2017, 1, 17), 8], [gd(2017, 1, 18), 11], [gd(2017, 1, 19), 11], [gd(2017, 1, 20), 6],
[gd(2017, 1, 21), 6], [gd(2017, 1, 22), 8], [gd(2017, 1, 23), 11], [gd(2017, 1, 24), 13],
[gd(2017, 1, 25), 7], [gd(2017, 1, 26), 9], [gd(2017, 1, 27), 9], [gd(2017, 1, 28), 8],
[gd(2017, 1, 29), 5], [gd(2017, 1, 30), 8], [gd(2017, 1, 31), 15]
];
var hours_worked = [
[gd(2017, 1, 1), 8], [gd(2017, 1, 2), 5], [gd(2017, 1, 3), 6], [gd(2017, 1, 4), 7],
[gd(2017, 1, 5), 5], [gd(2017, 1, 6), 4], [gd(2017, 1, 7), 8], [gd(2017, 1, 8), 5],
[gd(2017, 1, 9), 4], [gd(2017, 1, 10), 8], [gd(2017, 1, 11), 6], [gd(2017, 1, 12), 7],
[gd(2017, 1, 13), 5], [gd(2017, 1, 14), 6], [gd(2017, 1, 15), 7], [gd(2017, 1, 16), 7],
[gd(2017, 1, 17), 3], [gd(2017, 1, 18), 8], [gd(2017, 1, 19), 8], [gd(2017, 1, 20), 8],
[gd(2017, 1, 21), 9], [gd(2017, 1, 22), 4], [gd(2017, 1, 23), 9], [gd(2017, 1, 24), 5],
[gd(2017, 1, 25), 7], [gd(2017, 1, 26), 6], [gd(2017, 1, 27), 8], [gd(2017, 1, 28), 9],
[gd(2017, 1, 29), 1], [gd(2017, 1, 30), 5], [gd(2017, 1, 31), 9]
];
var dataset = [
{
label: "Contractual",
data: hours_contractual,
color: "#A00",
lines: {
lineWidth: 1,
show: true,
fill: false,
fillColor: {
colors: [{
opacity: 0.2
}, {
opacity: 0.4
}]
}
},
splines: {
show: false,
tension: 0.6,
lineWidth: 1,
fill: 0.1
},
}, {
label: "Total Hours",
data: hours_worked,
yaxis: 2,
color: "blue",
lines: {
lineWidth: 1,
show: true,
fill: false,
},
splines: {
show: false,
tension: 0.6,
lineWidth: 1,
fill: 0.1
},
}
];
var options = {
xaxis: {
mode: "time",
tickSize: [7, "day"],
tickLength: 6,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Arial",
axisLabelPadding: 10,
color: "#d5d5d5",
timeformat: "%e %b",
timezone: "browser"
},
yaxes: [{
position: "left",
max: 50,
color: "#d5d5d5",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Arial",
axisLabelPadding: 4
}, {
position: "right",
max: 50,
color: "#d5d5d5",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Arial",
axisLabelPadding: 80
}
],
legend: {
noColumns: 1,
labelBoxBorderColor: "#000000",
container: "#lateness-intervals-legend",
position: "nw"
},
series: {points: {show: true}},
grid: {
hoverable: true,
autoHighlight: true,
borderWidth: 0
}
};
$.plot("#lateness-intervals", dataset, options);
答案 0 :(得分:0)
这是CSS,我有一个边距应用于flot-base类,它应用于主canvas元素。工具提示继承了这个边距,从而改变了高亮环。
简单地删除flot-base类上的边距就解决了这个问题。