javascript - 如何使用 Flot Java Script 库为条形图中的系列分配不同的颜色？

Question

我用Flot库做图表，我需要呈现一个条形图，并且有一个特殊的系列需要区分，给它一个特定的颜色是最好的选择。

我已经在之前的图表中这样做了，为推送到 data 的系列提供了 color 参数，但它在这里不起作用。

21 条应该是红色的，但事实并非如此。

首先我尝试了通常的做法:

series.push({
                    color: 'anyHexColorCode',
                    data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})

在一个循环中，我检查了期望值并赋予了不同的颜色，就像我在下面显示的当前函数中所做的一样。

这就是我发送给 plot 的方式:

function plotInterpolacion(respuesta) {

    clearCharts()

    var series = []
    var colorsList = ['#8B0000','#FFA614']

    alert("La aproximación para x=" + $("#a").val() + " es igual a: " + respuesta['aproximacion'])

    var xs = Object.keys(respuesta['puntos']).sort().forEach(function (k,i) {

        if (k == respuesta['aproximacion']) {
            series.push({
                color: 0,
                data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
            })
        }
        else {
            series.push({
                color: 1,
                data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
            })
        }
    })

    $.plot($("#bars"), series, {

                                bars: {
                                            show:true,
                                            align: "center",
                                            barWidth: 0.6
                                }, 
                                xaxis: {
                                            mode: "categories", 
                                            tickLength:0
                                },
                                colors: colorsList
                                })

}

在该示例中，21 的栏应为红色。

这就是 respuesta['puntos'] 的样子:

  "puntos": {
    "18.0": 79.0, 
    "17.8": 72.0, 
    "21.0": 184.0000000000009
  }

我添加了 jquery.colorhelpers.js flot 插件，但没有任何区别。

Answer 1

barWidth 以轴单位表示。因此，如果 barWidth 为 0.5，并且第一条和第二条之间只有 0.2 个 x 单位，它们当然会重叠。

一个系列只能有一种颜色，并且您的所有条形都在同一个系列中。如果您希望它们有不同的颜色，请将它们分成不同的系列。