Flot库折线图问题：X轴偏移、日期显示及垂直网格线设置

嘿，我来帮你搞定这三个Flot折线图的问题，一个个拆解：

问题1：X轴偏移第一个数据点（min/max设置无效） #

你遇到的这个问题，90%的概率是没给X轴开启时间模式。Flot处理时间戳类型的X轴数据时，必须明确配置mode: "time"，不然它会把时间戳当成普通数值来解析，这时候设置min/max肯定达不到你想要的偏移效果。

另外，min和max的值必须和你的数据格式一致——也就是时间戳，不能用日期字符串。比如你想让3月26日的第一个数据点左边留出一点空间，可以把X轴的min设为3月25日的时间戳：

xaxis: {
  mode: "time",
  timeformat: "%m/%d", // 可选，设置刻度显示的日期格式
  min: gd(2018, 3, 25), // 比第一个数据点早一天，实现偏移
  max: gd(2018, 4, 2)  // 可选，给最后一个数据点右边也留空
}

把这段配置加上，应该就能解决偏移无效的问题了。

问题2：3月31日与4月1日数据重合 #

这个坑我也踩过！大概率是日期生成函数gd的问题。JavaScript的Date构造函数里，月份是从0开始计数的（0代表1月，1代表2月，以此类推）。如果你的gd函数没有做月份减1的处理，那gd(2018,3,31)实际上会生成「2018年4月31日」——但4月只有30天，JS会自动把它修正为「2018年5月1日」，这就会和你4月1日的数据点（如果有的话）重合。

先把gd函数修正为正确的版本：

function gd(year, month, day) {
  // 月份减1，适配JS Date的0-based规则
  return new Date(year, month - 1, day).getTime();
}

然后再给X轴加上每天的刻度配置，确保每天的刻度都是独立的：

xaxis: {
  mode: "time",
  timeformat: "%m/%d",
  tickSize: [1, "day"], // 强制每天生成一个刻度
  minTickSize: [1, "day"] // 确保最小刻度单位是天
}

这样3月31日的时间戳就会是正确的，不会和4月1日的数据点重合了。

问题3：添加垂直网格线 #

这个最简单！Flot默认是关闭垂直网格线的，你只需要在grid配置项里开启verticalLines: true就行，顺带可以调整一下网格的样式：

grid: {
  verticalLines: true, // 开启垂直网格线
  horizontalLines: true, // 默认是开启的，不想保留可以设为false
  borderColor: "#ccc", // 可选，设置网格边框颜色
  borderWidth: 1 // 可选，设置网格边框宽度
}

完整的示例代码 #

把上面的配置整合起来，你的代码应该是这样的：

// 修正后的日期生成函数
function gd(year, month, day) {
  return new Date(year, month - 1, day).getTime();
}

var alertTrendData = [
  [gd(2018,3,26),237],
  [gd(2018,3,27),200],
  [gd(2018,3,28),252],
  [gd(2018,3,29),232],
  [gd(2018,3,30),210],
  [gd(2018,3,31),245],
  [gd(2018,4,1),220]
];

// 绘制图表
$.plot("#yourChartContainer", [alertTrendData], {
  xaxis: {
    mode: "time",
    timeformat: "%m/%d",
    min: gd(2018,3,25), // 偏移第一个数据点
    max: gd(2018,4,2),
    tickSize: [1, "day"],
    minTickSize: [1, "day"]
  },
  grid: {
    verticalLines: true,
    horizontalLines: true,
    borderColor: "#ccc"
  },
  series: {
    lines: { show: true },
    points: { show: true }
  }
});

内容的提问来源于stack exchange，提问作者Fast Chip