jquery - 向浮点添加白色边框/描边(jQuery 图形)

Question

查看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

关于如何添加边框/描边有什么想法 - 或者这是否不可能？

Answer 1

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

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

• 第一个具有正常颜色:红色(或绿色)，仅具有线路启用
• 第二个是 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
    }
}],