гистограмма гистограммы разного цвета для каждой гистограммы? - PullRequest
Новая
       38

гистограмма гистограммы разного цвета для каждой гистограммы?

0 голосов
/ 07 сентября 2011

Можно ли дать каждому бару свой цвет на гистограмме g.Raphaël?

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

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

Ответы [ 3 ]

3 голосов
/ 24 августа 2012

Вы можете установить параметры следующим образом: 

var custom_colors =["#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff"];

r.barchart(x,y,width,height,[data], { colors: custom_colors });

Другие опции 

var options : {
    legend : [],
    stacked: false, //Use this to stack your bars instead of displaying them side by side
    type: "soft", //round, sharp, soft, square,
    colors : custom_colors
}

r.barchart(x,y,width,height,[data], options);

Возможно, вы захотите определить свои цвета в функции. Вот функция, которую вы можете использовать: 

function _getColors() {
    var byndColors = ["#ffc000","#1d1d1d","#e81c6e","#7c7c7c","#00aff2","#aaaaaa","#611bc9"];

    //some random colors
    var randColors = ["#77efac","#364f8a","#60cb94","#cf263b","#2471bb","#7fc398","#d2c66a","#2109dc","#66ad29","#9a9754","#640cdf","#257683","#d51e05","#4bb36e","#e7408a","#1ef173","#1756bc","#cff215","#15c2fb","#f010ab","#844a0","#c34021","#3e4cf2","#8e2864","#a28f5c","#a9d528","#7b1e43","#a5401c","#829813","#691ccd"]

    //combine them
    return byndColors.concat(randColors);

}

и используйте его как: 

r.barchart(x,y,width,height,[data], { colors: _getColors() });
1 голос
/ 04 января 2012

Вы можете изменить свойство attr каждого пути в svg

r.barchart(x,y,width,length,[data]);

var colors =["#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#552288","#228844","#a38643","#296583"];

// use jquery for easier way 
$("#holder svg path").each(function(index){
    $(this).attr("fill",colors[index]);
});
0 голосов
/ 27 января 2013

Вам необходимо указать несколько цветов, а затем убедиться, что данные являются массивом массивов, где индекс внутренних массивов равен 0 для всех значений, кроме этого индекса: 

data = [[55, 0, 0], [0, 20, 0], [0, 0, 40]];

r.barchart(10, 10, 100, 220, data, {
    colors: [
        // Some colours
        "000-#d00-#900",
        "000-#f64-#c31",
        "000-#fc0-#c90",
        "000-#3a3-#070",
        "000-#2bc-#089",
        "000-#00d-#00a",
        "000-#808-#404",
        "000-#444-#000"
    ]
});

Здесь r - это экземпляр Рафаэля. Смотри http://g.raphaeljs.com/barchart.html

...