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

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 日的 x 轴最小值（以及 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'
},