浮动高亮环偏移

Question

我正在绘制 2 条显示良好的时间序列线。

然后我打开了数据点的突出显示以便我可以提供工具提示，发现突出显示环与实际数据点有偏移，我必须将鼠标悬停在突出显示环的数据点左侧出现。

我正在使用 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);

Answer 1

它是 CSS，我在 flot-base class 上应用了边距，该边距应用到主 canvas 元素。工具提示继承了这个边距，因此移动了高亮环。

简单地删除 flot-base 上的边距 class 解决了这个问题。

浮动高亮环偏移

Flot highlight ring offset

jquery

flot