jqPlot - 基於系列中每個數據點的值範圍的不同顏色條

Question

我需要爲一個系列中的每個數據點有條件地更改條形圖的顏色。該系列中的1個數據點需要比其他4個數據點具有不同的顏色閾值。

我試圖實現在this SO post找到的建議，但我得到一個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，杆應該是紅色 如果第一元件如果內部數組的第一個元素大於等於8且< = 11，則條應該爲綠色。如果內部數組的第一個元素大於等於8，並且< = 11，則條應該是綠色。

對於結果的元件5，我需要： 如果內陣列的第一個元素是> = 0和< = 5，杆應該是紅色 如果內陣列的第一個元素是> = 6和< = 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 < threshold？ [「＃ff0000」]：[「＃00ff00」];