Flot曲线起始点设置：如何让曲线从首个数据点而非(0,0)开始

嗨，我来帮你搞定这个Flot曲线起始点的问题！你现在遇到的情况是因为Flot（尤其是配合curvedLines插件时）会默认把缺失数据的前序起点补成(0,0)，而你数据里的第一个元素[null,]正好触发了这个行为。下面给你两个简单有效的解决方案：

方案1：直接移除无效的空数据项 #

你的第一个有效数据点是[20,20]，前面的[null,]完全没必要保留，直接删掉它就行。修改后的数据如下：

var d1 = [[20, 20], [25, 50], [27.5, 35], [30, 20], [35, 20]];

这样曲线就会直接从第一个有效数据点(20,20)开始绘制，不会再连接到原点了。

方案2：设置坐标轴起始范围（保留空数据项的情况） #

如果因为某些原因必须保留[null,]，那可以通过设置坐标轴的最小范围，让原点不在图表可视区域内，曲线自然就从第一个有效点开始了：

var options = {
  series: { curvedLines: {active: true} },
  xaxis: { min: 20 }, // 把x轴起始值设为第一个数据点的x值
  yaxis: { min: 20 }  // 把y轴起始值设为第一个数据点的y值
};

这个方法会让图表只显示从(20,20)开始的区域，曲线也就不会再延伸到原点了。

额外说明 #

curvedLines插件在处理曲线平滑时，会自动补全数据点之间的连接路径，当第一个数据点前存在缺失值时，它就会默认从(0,0)开始绘制。所以最根本的解决办法还是移除开头的无效空数据，这样既简洁又能保证曲线的起始点完全符合你的需求。

内容的提问来源于stack exchange，提问作者Selva Ganapathi