如何使我的浮点图的左边框与最左边的垂直线对齐？

Question

我用 Flot 创建了一个图表（使用 jQuery 1.11）。我在尝试使网格的边界与网格的线对齐时遇到问题。正如您在此 Fiddle 中看到的那样，图形的左边缘/边框不与图形最左侧的垂直线重叠。我怎样才能让他们对齐？我像这样创建了 Flot 图：

$(function() {
  var data = [[1403913600000, 2915000],[1437782400000, 2788000],[1466812800000, 2759000]];

  $("<div id='tooltip'></div>").css({
    position: "absolute",
    display: "none",
    border: "1px solid #fdd",
    padding: "2px",
    "background-color": "#fee",
    opacity: 0.80
  }).appendTo("body");

  $.plot("#placeholder", [data], {
    yaxis: {
      tickFormatter: formatTime
    },
    xaxis: {
      mode: "time",
      labelHeight: 30
    },
    points: {
      show: true
    },
    lines: {
      show: true
    },
    grid: {
      margin: 10,
      labelMargin: 5,
      labelWidth: 20,
      hoverable: true,
      clickable: true,
      tickColor: "#efefef",
      borderWidth: 2,
      borderColor: "#efefef"
    },
    tooltip: true
  });

Answer 1

由于您的数据点分布在数年内，Flot 的自动报价生成每三个月（当月的第一天）为您提供一个报价。 x 轴上的第一个刻度是 2014 年 7 月 1 日，第一个数据点是 2014 年 6 月 28 日。

1) 要在图表边缘再打勾，您可以在 x 轴选项中定义 2014 年 4 月 1 日的最小值（以及 2016 年 7 月 1 日的最大值），精确值取决于您的时区（此处为 UTC+2），您可能需要更改它们 (updated fiddle)：

xaxis: {
  mode: "time",
  labelHeight: 30,
  min: 1396275200000,
  max: 1467396000000
},

2) 另一种解决方案可能是自己定义刻度（等于您的数据点 x 值）。那么你只有数据点所在的位置 (updated fiddle):

xaxis: {
  mode: "time",
  labelHeight: 30,
  ticks: [1403913600000, 1437782400000, 1466812800000],
  timeformat: '%Y/%m/%d'
},

如何使我的浮点图的左边框与最左边的垂直线对齐？

How do I make the left border of my flot graph align with the left-most vertical line?

jquery

border

flot