將用戶選擇和自動生成的顏色結合在一起

我想要同時使用用戶選擇和自動生成的數據系列着色組合，以便在添加新數據系列時自動生成顏色，但已繪製的所有其他數據系列將會保持相同的顏色。將用戶選擇和自動生成的顏色結合在一起

首次添加新數據系列時，我將顏色選項留空，以便自動分配顏色。

當重新繪製我重新繪製

然後我看所得到的彩色圖並重新分配相同的顏色到相應的數據系列時重新繪製之前提取從現有的繪圖顏色信息。

問題是，當我以這種方式串行添加數據系列並在每個數據系列添加之間調用$ .plot時，我最終將多個數據系列分配給相同的顏色。

例子：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Color Test Harness</title> 
     <script src="./lib/jquery.js"></script> 
     <!--[if IE lte 8]><script src="../lib/excanvas.js"></script><![endif]--> 
     <script src="./lib/jquery.flot.js"></script> 
    </head> 
    <body> 
     <h1>Test graph</h1> 
     <div id="graph1" style="width:600px;height:300px;"></div> 

<script type="text/javascript"> 
$(function() { 

    var data = [ [1, 2], [2, 3], [4, 1] ]; 
    var plot = $.plot($("#graph1"), {}, {}); 
    function findColors() { 
     var c = {}; 
     if(plot != null) { 
      var series = plot.getData(); 
      for(var i = 0; i < series.length; i++) { 
       var aSeries = series[i]; 
       c[aSeries.label] = aSeries.color; 
      } 
     } 
     return c; 
    } 

    var all_data = []; 
    for(var i = 0; i < 5; i++) { 
     var colors = findColors(); 
     var dataObj = { 'label' : "data" + i, 'data' : data }; 
     all_data.push(dataObj); 

     for(var j = 0; j < all_data.length; j++) { 
      if(colors.hasOwnProperty(all_data[j].label)) { 
       all_data[j].color = colors[all_data[j].label]; 
      } 
     } 
     plot = $.plot($("#graph1"), all_data, {}); 
    } 
}) 
</script> 
    </body> 
</html>

我怎樣才能顏色發電機，以確保它使用的是不是已經預先分配給其它數據系列的一個顏色？

來源

2011-12-22 zwalker

顏色只是數字，真的是一個指標。因此，當你在做findColors()的事情時，製作一個跟蹤哪些顏色已經在使用的對象（即現在你有標籤 - >顏色，也可以製作一個顏色 - > 1）。然後，稍後當您創建新系列時，請稍微介紹一下您的物體並尋找未分配的顏色索引：

var colors = findColors(); 

var colorsUsed = findUsedColors(colors); 

function findUsedColors(c){ 
    var cu = {}; 

    $.each(c,function(k,v){ 
     cu[v] = 1; 
    }); 
    return cu; 
} 

function findUnassignedColor(cu){ 
    for (var i=0;i<2000;i++){ 
     if (!cu[i]){ 
     cu[i] = 1; 
     return i; 
     } 
    } 
} 


// then later, when assigning a color 
    for(var j = 0; j < all_data.length; j++) { 
     if(colors.hasOwnProperty(all_data[j].label)) { 
      all_data[j].color = colors[all_data[j].label]; 
     } else { 
      all_data[j].color = findUnassignedColor(colorsUsed); 
     } 
    }

來源

2011-12-22 16:58:53 Ryley

將用戶選擇和自動生成的顏色結合在一起

回答

相關問題