2014-11-05 11 views
8

Jestem początkującym JavaScriptem, używając morris.js do stworzenia wykresu słupkowego, w którym każdy pasek zawierający wartość y ma być inny. Poniższy kod pokazuje, co robiłem do tej poryRóżne kolory paska z wykresem słupkowym morris.js?

Morris.Bar({ 
element: 'calls-made', 
data: [ 
{ y: 'Person A', a: 10 }, 
{ y: 'Person B', a: 15 }, 
{ y: 'Person C', a: 12 }, 
{ y: 'Person D', a: 20 } 
], 
xkey: 'y', 
ykeys: ['a'], 
labels: ['Calls'], 
barColors: ["#B21516", "#1531B2", "#1AB244", "#B29215"], 
hideHover: 'always', 
}); 

Chciałbym poprzeczkę dla „osoba A” za jeden kolor, a następnie „Osoba B” być inny kolor i tak dalej, ale w tej chwili wszystkie paski są wyświetlane jako pierwszy kolor w tablicy. Czy ktoś wie, czy istnieje sposób, aby to zrobić? Wielkie dzięki!

Odpowiedz

25
Morris.Bar({ 
element: 'bar-example', 
data: [ 
{ y: 'Person A', a: 10 }, 
{ y: 'Person B', a: 15 }, 
{ y: 'Person C', a: 12 }, 
{ y: 'Person D', a: 20 } 
], 
xkey: 'y', 
ykeys: ['a'], 
labels: ['Calls'], 
hideHover: 'always', 
barColors: function (row, series, type) { 
console.log("--> "+row.label, series, type); 
if(row.label == "Person A") return "#AD1D28"; 
else if(row.label == "Person B") return "#DEBB27"; 
else if(row.label == "Person C") return "#fec04c"; 
else if(row.label == "Person D") return "#1AB244"; 
} 
}); 
+0

Peffect. To mi pomogło. +1 – Bhaskara

Powiązane problemy