向 Flot Point 添加白色边框/描边（jQuery 图表）

【问题标题】：Add a white border / stroke to Flot Point (jQuery graph)向 Flot Point 添加白色边框/描边（jQuery 图表）
【发布时间】：2016-03-25 00:59:09
【问题描述】：

查看 positionly.com 使用的这张图表：https://www.dropbox.com/s/kz9ksagctf7zpaa/Screenshot%202015-12-18%2010.31.03.png?dl=0

是否可以在 Flot jQuery 图上重新创建它？

目前我有以下选择：

    points    : {
        show     : true,
        radius   : 2,
        lineWidth: 3,
        fillColor: 'red',
        fill     : true,
        shadowSize: 0

截图：https://www.dropbox.com/s/07wm4r8ojzhr5js/Screenshot%202015-12-18%2010.32.45.png?dl=0

关于如何添加边框/描边的任何想法 - 或者这是否可能？

【问题讨论】：

标签： jquery graph styles flot

【解决方案1】：

这对于默认的 Flot 选项是不可能的。您可以为点定义单独的fillColor，但不能定义单独的边框/描边颜色。

一种解决方法是定义两个具有相同数据的数据系列：

第一个带有普通color: red（或绿色）的只有行启用
第二个是color: white 和fillColor: red （或绿色）已启用点数。

结果：

代码（更多在fiddle）：

var plot = $.plot("#placeholder", [{
    data: sin,
    label: "sin(x)",
    color: 'red',
    points: {
        show: false,
    },
    lines: {
        show: true,
        lineWidth: 5
    }
}, {
    data: sin,
    color: 'white',
    points: {
        show: true,
        lineWidth: 2,
        radius: 5,
        fill: true,
        fillColor: 'red'
    },
    lines: {
        show: false
    }
}],

【讨论】：