莫里斯JS中不同的彩色線段

Question

所以我試圖在莫里斯JS中獲得不同的線段。

這是我試圖達到的效果。

https://gyazo.com/6d2b7a211a21b810521dac35613a6e3c

這裏是我使用

new Morris.Line({ 
    element: 'record', 
     data: [ 
      { year: '2008', value: 20 }, 
      { year: '2009', value: 10 }, 
      { year: '2010', value: 5 }, 
      { year: '2011', value: 5 }, 
      { year: '2012', value: 20 } 
     ], 
     xkey: 'year', 
     ykeys: ['value'], 
     labels: ['Value'], 
     lineWidth: '1px', 
     pointSize: '3px', 
     smooth: false, 
     hideHover: 'always', 
     lineColors: ['#000'], 
     axes: 'y', 
     ymin: '5', 
     ymax: '20', 

     yLabelFormat: function (y) { 
      if (y != 5 && y != 20) { 
       return ''; 
      } 
      else { 
       return y; 
      } 
     }, 

     lineColors: function(row, sidx, type) { 
      console.log(row); 
      console.log(this.data[sidx]); 
      if (this.data[sidx].src.value > 10) return "#00ff00"; 
      if (this.data[sidx].src.value > 5) return "#ff00ff"; 
     } 
    }); 

繼承人的鏈接小提琴

https://jsfiddle.net/mbe44ep0/

更新代碼：輸入此代碼後，我收到了幾錯誤。在@eugen sunic中發表評論

Answer 1

嘗試使用回調函數。我曾在JS中使用過許多圖表，但沒有使用Morris js。 這種語法應該這樣做。

一般回調函數：

lineColors: function(row, sidx, type) { 
return "blue" 
} 

修改回調函數：

lineColors: function(row, sidx, type) { 
if (row.property >) return "color"; 
if (row.property >) return "color"; 
}