Question

我想同时使用用户选择和自动生成的数据系列着色，以便在添加新数据系列时自动生成颜色，但已绘制的所有其他数据系列将保持相同的颜色。

首次添加新数据系列时，我将颜色选项留空，以便自动指定颜色。

重新绘图时，我会在重新绘图之前从现有绘图中提取颜色信息

然后我查看生成的颜色贴图，并在重新绘图时将相同的颜色重新指定给相应的数据系列。

问题在于，当我以这种方式串行添加数据系列并在每个数据系列添加之间调用$ .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>

如何让颜色生成器确保使用尚未预先分配给其他数据系列的颜色？

Answer 1

颜色只是数字，真正的指数。因此，当您执行findColors()事情时，请创建一个跟踪哪些颜色已被使用的对象（即，现在您有标签 - ＆gt;颜色，也可以创建一个只有颜色 - > 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);
        }
    }

在flot中组合用户选择的和自动生成的颜色

1 个答案: