-1

所以我做了一個JavaScript函數，我生成一個條形圖。一切正常，但我想改變酒吧的顏色。現在每個酒吧都是綠色的，但我想要的是，如果數據低於0，那麼酒吧必須變成紅色。更改我的條形圖顏色？

 $(function() { 
      $.ajax({ 
      url: 'includes/data.php', 
      dataType: 'json', 
      method: 'GET' 
      }).done(function(data) { 
       var plotData = []; 
       for(var i = 0; i < data.length; i++) 
        plotData.push([data[i].Datum, parseInt(data[i].Gevoel)]); 

       var bar_data = { 
         data: plotData, 
         color: "green"  
       }; 

       $.plot("#bar-chart", [bar_data], { 
        grid: { 
         borderWidth: 1, 
         borderColor: "#f3f3f3", 
         tickColor: "#f3f3f3" 
        }, 
        series: { 
         bars: { 
          show: true, 
          barWidth: 0.5, 
          align: "center" 
         } 
        }, 
        xaxis: { 
         mode: "categories", 
         tickLength: 0 
        } 
       }); 
      /* END BAR CHART */ 
     }); 
    });

enter image description here

所以1和2有可能改變到紅色。

來源

2014-05-05 Munlau Yau

您是否嘗試過任何if語句對於如果數據：<0）{顏色：紅}其他{顏色：綠色}？ – tylerlindell

是的，我試過，但它不工作 –

我假設「Datum」是你的X軸值，「Geveol」是你的Y軸。我沒有測試過代碼，但它應該可以工作。

$(function() { 
     $.ajax({ 
     url: 'includes/data.php', 
     dataType: 'json', 
     method: 'GET' 
     }).done(function(data) { 
      var plotData = []; 
      var bar_data = { 
        data: [], 
        color: []  
       }; 
      for(var i = 0; i < data.length; i++){ 
       bar_data.data.push([[data[i].Datum, parseInt(data[i].Gevoel)]]); 
       if(parseInt(data[i].Gevoel) > 0) 
        bar_data.color.push("green"); 
       else 
        bar_data.color.push("red"); 
      } 
      $.plot("#bar-chart", [bar_data], { 
       grid: { 
        borderWidth: 1, 
        borderColor: "#f3f3f3", 
        tickColor: "#f3f3f3" 
       }, 
       series: { 
        bars: { 
         show: true, 
         barWidth: 0.5, 
         align: "center" 
        } 
       }, 
       xaxis: { 
        mode: "categories", 
        tickLength: 0 
       } 
      }); 
     /* END BAR CHART */ 
    }); 
});

EDIT

我更新上述代碼。對不起，在第一個版本中出現了一些明顯的錯誤，並且與Jquery Flot有點生疏。要使每個條形成一個單獨的系列，它需要用雙數組包裝。然後，顏色屬性可以是相等長度的陣列，賦予顏色的每個條

編輯2

下面是一個使用從我與多種顏色工作FLOT的示例數據的的jsfiddle。我不知道有什麼理由不爲你工作與我的示例代碼，但這應該幫助：JSfiddle

來源

2014-05-05 14:28:20

現在不畫我的圖表 –

@MunlauYau，應該現在的工作 –

東西仍然是錯誤的。現在它只繪製了圖表缺失的圖表 –

更改我的條形圖顏色？

回答

編輯2

相關問題