jquery - 流程图 - 根据数据不同的线和点颜色

Question

我有一个关于不喜欢/喜欢的折线图。正值应具有较深的绿色边框，红色值应具有较深的红色边框。此外，红点应该用红色填充，而不是绿色。

这就是它的样子!

这就是它应该的样子

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

$.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
    }
});

Answer 1

获得您想要的外观的最简单方法是删除阈值插件并将其分成两个系列:

[{
    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'
    }
}],

fiddle here .