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

Question

我有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
    }
});

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

小提琴here。

Answer 2

如果正在使用数据阵列，您也可以这样做：

var dataset = [
    { label: "Success", data: convertedSuccessArray, points: { fillColor: "green" } },
    { label: "Failed", data: convertedFailedArray, points: { fillColor: "red" } }
];

Answer 3

实际上，如果你在点上关闭填充并增加'lineWidth'，你可以保留阈值插件。这样可以在阈值的颜色中显示填充圆圈的外观。缺点是这会产生比默认大小更大的圆圈。

   <div id="column-side">my right side content</div>
   <div id="column-main">my main content</div>
   <div id="column-menu">my sub menu</div>