javascript - jqPlot - 基于系列中每个数据点的值范围的不同颜色条

Question

我需要为一个系列中的每个数据点有条件地更改条形图的颜色。系列中的 1 个数据点需要与其他 4 个数据点具有不同的颜色阈值。

我尝试实施在此 SO 帖子中找到的建议，但我收到一个 JS 错误，表明该对象没有 get 方法。

这是我正在使用的数据：

系列 2 需要有多种颜色。制作这些系列的数据在这里

1. 阈值数据包含 [ [2,1], [4,2], [6,3], [3,4], [8, 5] ]
2. 结果数据包含 [ [6,1], [6,2], [4,3], [6,4], [6, 5] ]

结果数据参考蓝色条形图线，阈值数据参考橙色线。

对于元素 4 的结果之一，我需要以下结果：

如果内部数组的第一个元素 >= 0 和 <= 4，条形应该是红色 如果内部数组的第一个元素是 >=5 并且 <= 7，如果内部数组的第一个元素是黄色的内部数组 >=8 和 <= 11，条应该是绿色的。

对于结果的第 5 个元素，我需要：如果内部数组的第一个元素 >= 0 并且 <= 5，则条形应该是红色 如果内部数组的第一个元素是 >= 6 并且 <= 11，则条形应该是绿色的。

例如，如果resultsSeries[0][0] === 4然后条形颜色应为红色。

在这一点上，我什至可以在图表生成后以某种方式迭代图表并以这种方式进行更改，但我不知道该怎么做。我检查了它上面的元素并得到了一个画布，我不太明白它jqPlot是如何影响其中的项目或它给它们命名的。

链接到 jsFiddle.net

它会导致以下错误：

Uncaught TypeError: Object [object Object] has no method 'get'
jqplot.barRenderer.js:280
$.jqplot.BarRenderer.draw jqplot.barRenderer.js:280
Series.draw jquery.jqplot.js:1065
drawSeries jquery.jqplot.js:2735
draw jquery.jqplot.js:2249
$.jqplot jquery.jqplot.js:164
(anonymous function) jqplot_example.html:71
n jquery.min.js:2
o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.C

Answer 1

当你想覆盖它时，你应该实现它的所有方法。这是来自源代码，您需要实现get和setColors方法。

function (colors) {
    colors = colors || $.jqplot.config.defaultColors;
    var idx = 0;

    this.next = function () { 
        if (idx < colors.length) {
            return colors[idx++];
        }
        else {
            idx = 0;
            return colors[idx++];
        }
    };

    this.previous = function () { 
        if (idx > 0) {
            return colors[idx--];
        }
        else {
            idx = colors.length-1;
            return colors[idx];
        }
    };

    // get a color by index without advancing pointer.
    this.get = function(i) {
        var idx = i - colors.length * Math.floor(i/colors.length);
        return colors[idx];
    };

    this.setColors = function(c) {
        colors = c;
    };

    this.reset = function() {
        idx = 0;
    };

    this.getIndex = function() {
        return idx;
    };

    this.setIndex = function(index) {
        idx = index;
    };
} 

Answer 2

seriesColors: value < threshold ? ["#ff0000"] : ["#00ff00"];