flotでユーザseletedと自動生成された色を組み合わせる

新しいデータ系列が追加されたときに色が自動生成されるが、既にプロットされた他のすべてのデータ系列が自動的に生成されるように、同じ色のままです。flotでユーザseletedと自動生成された色を組み合わせる

最初に新しいデータ系列を追加するときは、カラーオプションを空のままにして、色が自動的に割り当てられるようにします。場合再プロット

は、私はその後、得られたカラーマップを見て、対応するデータ系列を再描画に同じ色を再割り当て

を再プロットする前に、既存のプロットから色情報を抽出します。

問題は、各データ系列の追加の間に$ .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>

は、どのように私はそれが既に他のデータ系列の1つに割り当て事前れていない色を使用して確認するために、色の発電機を得ることができますか？

出典

2011-12-22 zwalker

色は単なる数字であり、実際のインデックスです。したがって、findColors()の作業を行っているときは、既に使用中の色をトラッキングするオブジェクトを作成します（今はlabel-> color、それにcolor-> 1）。次に、新しいシリーズを作成するときに、colorsUsedオブジェクトを通過する小さな関数を用意し、割り当てられていないカラーインデックスを探します。

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

flotでユーザseletedと自動生成された色を組み合わせる

答えて

関連する問題