2015-02-10 71 views
1

我已經解決了這個問題。我應該更仔細地閱讀API文檔。在所有生產線上強制使用相同的顏色


我有15個不同的等值線繪製線條,它們都必須#FF0000 /紅色。他們都有紅色,但他們有一個稍微更暗,更輕的變體。

選項對象:

 var options = { 
      series: {      
       points: { 
        show: true, 
        radius: 5, 
        symbol: "circle", 
        fill: true, 
        color: ('#00FF00') 
       }, 
       lines: { 
        editable: false, 
        hoverable: false, 
        clickable: false, 
        color: ("#FF0000") 
       } 
      }, 
      yaxes: [ { 
       position: "left", 
       min: 0, max: 60, 
       tickSize: 4, 
       //color: 'transparent' 
      } ], 
      xaxes: [ { 
       position: "bottom", 
       min: 7.00, max: 7.80, 
       //color: 'transparent' 
      } ], 
      grid: { 
       backgroundColor: "white", 
       editable: true, 
       hoverable: false, 
       clickable: false 
      }, 
      legend: { 
       position: "nw" 
      }, 
      colors: ['#FF0000'],     
     }; 

數據對象:

 var data = [     
      { data: line10, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line15, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line20, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line25, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line30, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line35, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line40, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line50, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line60, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line70, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line80, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line90, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line100, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line110, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 
      { data: line120, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false }, 


      { data: startPoint, lines: { show: true }, points: { show: true }, editable: true, editMode: 'xy', color: '#00FF00' }, 
     ]; 

Flot.js API文檔指出以下:

如果有更多的數據序列比色,海軍報將嘗試通過增亮和減淡主題中的顏色來產生額外的顏色。

是否可以將此選項設置爲false或強制設置顏色?

回答

2

就像我發佈我的問題,我想爲什麼不嘗試添加相同的顏色15次。這工作。

我改變

colors: ['#FF0000'] 

colors: ['#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000', '#FF0000'] 

一個限制是它們基於一個從零開始的索引,所以如果我添加任何其他Flot data series他們之間我必須重新排列顏色。


沒關係我任何問題,我再次閱讀API文檔,發現了color不是lines對象的一部分。這就是我做錯了。

予改變的數據對象於此,顏色被設置在每行的末尾:

  var data = [     
       { data: line10, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line15, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line20, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line25, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line30, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line35, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line40, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line50, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line60, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line70, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line80, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line90, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line100, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line110, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
       { data: line120, lines: { show: true, lineWidth: 2 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 


       { data: startPoint, lines: { show: true }, points: { show: true }, editable: true, editMode: 'xy', color: '#00FF00' }, 
      ]; 
相關問題