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'
},

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

1 个答案: