Объединение выбранных пользователем и автоматически сгенерированных цветов в flot - PullRequest
Новая
       11

Объединение выбранных пользователем и автоматически сгенерированных цветов в flot

0 голосов
/ 22 декабря 2011

Я бы хотел использовать как выбранную пользователем, так и автоматически сгенерированную раскраску рядов данных в комбинации так, чтобы при добавлении нового ряда данных автоматически генерировались цвета, но все остальные уже нанесенные ряды данных оставались одного цвета.

При первом добавлении нового ряда данных я оставляю параметр цвета пустым, чтобы цвет назначался автоматически.

При повторном построении я извлекаю информацию о цвете из существующего графика перед повторным нанесением

Затем я смотрю на полученную цветовую карту и переназначаю тот же цвет для соответствующего ряда данных при повторном построении.

Проблема заключается в том, что когда я последовательно добавляю серии данных таким образом с вызовом $.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 Ответ

1 голос
/ 22 декабря 2011

Цвета - просто цифры, индекс действительно.Поэтому, когда вы делаете 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);
        }
    }
...