如何移除flot.js折线图首尾数据点之间的连线?
解决Flot.js折线图首尾点连线的问题
嘿,我之前也碰到过这个烦人的问题!其实Flot.js本身就有专门的配置项控制折线是否首尾闭合,大概率是你不小心开启了闭合开关😂
- 首先检查你的图表配置里的
series.lines部分,有没有设置close: true?这个参数的作用就是强制折线首尾相连,形成一个闭合的多边形(尤其是当你开启填充fill: true的时候,这个配置很容易被误加)。 - 只需要把这个参数改成
close: false(或者直接删掉它,因为默认值就是false),就能去掉那条讨厌的首尾连线了。
举个实际的代码例子:
错误的配置(会导致首尾连线)
$.plot("#chart-container", [yourDataArray], { series: { lines: { show: true, fill: true, close: true // 就是这个参数让首尾连起来了! } } });
修正后的配置
$.plot("#chart-container", [yourDataArray], { series: { lines: { show: true, fill: true, close: false // 关闭首尾闭合,或者直接删掉这一行 } } });
如果上面的方法没用,那可能是你用了一些自定义的绘图插件或者对数据做了特殊处理?可以检查下你的数据数组里是不是不小心重复了第一个和最后一个点,或者有没有其他自定义的线条绘制逻辑干扰了默认行为。
内容的提问来源于stack exchange,提问作者Joumana Issa
相关产品推荐
相关产品推荐

