jquery – Flot Chart – 根据数据不同的线和点颜色

我有dis / likes的折线图.正值应为深绿色边框,红色值为深红色边框.此外,红点应填充红色,而不是绿色.

这是它的样子！

它应该是这样的

几个小时后,我无法得到任何解决方案,所以欢迎任何帮助.这是我的代码：

$.plot("#curvePlaceholder", [{
    data: data,
    color: "#83ce16",
    threshold: {
        below: 0,
        color: "#c00000"
    },
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    }
}],
    {
    series: {
        lines: {
            show: true,
            fill: true
        },
        points: {
            show: true,
            fillColor: '#83ce16'
        }
    },
    grid: {
        hoverable: true,
        clickable: true,
        backgroundColor: 'transparent',
        color: 'transparent',
        show: true,
        markings: [
            { yaxis: { from: 0, to: 0 }, color: "#737374"}
        ],
        markingsLineWidth: 6
    },
    yaxis: {
        show: false,
        <?=$chart_data['ymin'];?>
        <?=$chart_data['ymax'];?>
    },
    xaxis: {
        show: false,
        min: -0.4
    }
});

获得你想要的外观的最简单方法是删除阈值插件并将其拆分为两个系列：

[{
    data: [[0,0],[5,1],[7,0]],
    color: "#83ce16",
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    },
    points: {
        show: true,
        fillColor: '#83ce16'
    }
},{                           
    data: [[7,0],[11,-1],[11,0]],
    color: "#c00000",
    lines: {
        fill: true,
        lineWidth: 3,
        fillColor: {
            colors: [{ opacity: 1 }, { opacity: 1 } ]
        }
    },
    points: {
        show: true,
        fillColor: '#c00000'
    }
}],

小提琴here.