改变条形图的颜色？

Question

所以我创建了一个javascript函数，我生成一个条形图。一切正常，但我想改变酒吧的颜色。现在每个栏都是绿色的，但我想要的是，如果数据低于0，则栏必须变为红色。

        $(function() {
            $.ajax({
            url: 'includes/data.php',
            dataType: 'json',
            method: 'GET'
            }).done(function(data) {
                var plotData = [];
                for(var i = 0; i < data.length; i++)
                    plotData.push([data[i].Datum, parseInt(data[i].Gevoel)]); 

                var bar_data = {
                        data: plotData,
                        color: "green"      
                };

                $.plot("#bar-chart", [bar_data], {
                    grid: {
                        borderWidth: 1,
                        borderColor: "#f3f3f3",
                        tickColor: "#f3f3f3"
                    },
                    series: {
                        bars: {
                            show: true,
                            barWidth: 0.5,
                            align: "center"
                        }
                    },
                    xaxis: {
                        mode: "categories",
                        tickLength: 0
                    }
                });
            /* END BAR CHART */
        }); 
    });

所以1和2必须改为红色。

Answer 1

我假设＆＃34; Datum＆＃34;是你的X轴值和＆＃34; Geveol＆＃34;是你的y轴。我还没有对代码进行测试，但它应该有效。

$(function() {
        $.ajax({
        url: 'includes/data.php',
        dataType: 'json',
        method: 'GET'
        }).done(function(data) {
            var plotData = [];
            var bar_data = {
                    data: [],
                    color: []      
                };
            for(var i = 0; i < data.length; i++){
                bar_data.data.push([[data[i].Datum, parseInt(data[i].Gevoel)]]); 
                if(parseInt(data[i].Gevoel) > 0)
                   bar_data.color.push("green");
                else
                   bar_data.color.push("red");
            }
            $.plot("#bar-chart", [bar_data], {
                grid: {
                    borderWidth: 1,
                    borderColor: "#f3f3f3",
                    tickColor: "#f3f3f3"
                },
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.5,
                        align: "center"
                    }
                },
                xaxis: {
                    mode: "categories",
                    tickLength: 0
                }
            });
        /* END BAR CHART */
    }); 
});

---

修改

我更新了上面的代码。对不起，在第一个版本中犯了一些明显的错误，对Jquery Flot来说有点生疏。 要使每个条形成一个单独的系列，它需要包装在双数组中。然后color属性可以是等长的数组，给出每个条的颜色

---

编辑2

这是一个使用Flot示例中的数据的jsfiddle，我使用了多种颜色。我不确定我的示例代码对您不起作用，但这应该会有所帮助：JSfiddle