jQueryのFLOT - グリッド線は、私は1つのリアルタイムFLOTを作成しようとしてい埋めラインを介して

Question

を示していないと私の問題は、私は私のデータのラインの充填を通じてFLOTグリッドを見ることができないということですあなたは私の下の画像のようなビット透明充填を取得する任意のアイデアを持っている場合...

、私は私のフィドルの上にもそれを適用したいと思います！

---

私は何を達成しようとしていることはそのような何かされています Picture of what I try to get

ここでは、私が働いているかについてのフィドルです： My flot on Fiddle

コード：

---

$(function() { 

    getRandomData = function(){ 
     var rV = []; 
     for (var i = 0; i < 10; i++){ 
      rV.push([i,Math.random() * 10]); 
     } 
     return rV; 
    } 

    getRandomDataa = function(){ 
     var rV = []; 
     for (var i = 0; i < 10; i++){ 
      rV.push([i,Math.random() * 10 + 5]); 
     } 
     return rV; 
    } 

    getSeriesObj = function() { 
     return [ 
     { 
      data: getRandomDataa(), 
      lines: { 
       show: true, 
       fill: true, 
       lineWidth: 5, 
       fillColor: { colors: [ "#b38618", "#b38618" ] }, 
       tickColor: "#FFFFFF", 
       tickLength: 5 
      } 
     }, { 
      data: getRandomData(), 
      lines: { 
       show: true, 
       lineWidth: 0, 
       fill: true, 
       fillColor: { colors: [ "#1A508B", "#1A508B" ] }, 
       tickColor: "#FFFFFF", 
       tickLength: 5 
      } 
     }]; 
    } 

    update = function(){ 
     plot.setData(getSeriesObj()); 
     plot.draw(); 
     setTimeout(update, 1000); 
    } 

    var flotOptions = { 
     series: { 
      shadowSize: 0, // Drawing is faster without shadows 
      tickColor: "#FFFFFF" 
     }, 
     yaxis: { 
      min: 0, 
      autoscaleMargin: 0, 
      position: "right", 
      transform: function (v) { return -v; },  /* Invert data on Y axis */ 
      inverseTransform: function (v) { return -v; }, 
      font: { color: "#FFFFFF" }, 
      tickColor: "#FFFFFF" 
     }, 
     grid: { 
      backgroundColor: { colors: [ "#EDC240", "#EDC240" ], opacity: 0.5 }, // "Ground" color (May be a color gradient) 
      show: true, 
      borderWidth: 1, 
      borderColor: "#FFFFFF", 
      verticalLines: true, 
      horizontalLines: true, 
      tickColor: "#FFFFFF" 
     } 
    }; 

    var plot = $.plot("#placeholder", getSeriesObj(), flotOptions); 

    setTimeout(update, 1000); 
}); 

ありがとうございます！

Answer 1

あなたはspecify the fill colorにFLOTおよびアルファレベル（透明）でrgba()色指定を使用することができます。

fillColor: { colors: [ "rgba(179, 134, 24, .2)", "rgba(179, 134, 24, .2)" ] }, 

1のアルファ値は完全に不透明である0のアルファ値は、完全に透明です。