jqPlot - 基于串联的每个数据点的值范围的不同颜色条

Question

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

我尝试实施this SO post中找到的建议，但我收到了一个JS错误，该对象没有获得该方法。

这是我正在使用的数据：

系列2需要有不同的颜色。产生这些系列的数据在这里

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

结果数据是指蓝色条形图线和橙色线的阈值数据。

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

如果内部数组的第一个元素是＆gt; = 0且＆lt; = 4，则条形应为红色 如果内部数组的第一个元素是> = 5且＆lt; = 7，则该条应为黄色 如果内部数组的第一个元素是＆gt; = 8且＆lt; = 11，则该条应为绿色。

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

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

此时，我甚至可以在生成并以某种方式更改它之后迭代图表，但我不确定如何做到这一点。我检查了它上面的元素并得到了画布，我不太清楚jqPlot如何影响其中的项目或它们命名的内容。

Link to 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＆lt;门槛？ [“＃ff0000”]：[“＃00ff00”];