Цвет легенд Cal-Heatmap для качественных категорий

Question

Я пытаюсь создать cal-heatmap с качественной цветовой легендой для 9 категорий (с надписью 1-9). Я использую следующие CSS, чтобы установить цвета:

<style type="text/css"> 
.q8{fill:rgb(141, 211, 199);} 
.q7{fill:rgb(255, 255, 179);} 
.q6{fill:rgb(190, 186, 218);} 
.q5{fill:rgb(251, 128, 114);} 
.q4{fill:rgb(128, 177, 211);} 
.q3{fill:rgb(253, 180, 98);} 
.q2{fill:rgb(179, 222, 105);} 
.q1{fill:rgb(252, 205, 229);} 
.q0{fill:rgb(217, 217, 217);} 

С этим:

var cal_cluster = new CalHeatMap(); 
cal_cluster.init({ 
    itemSelector: "#chart2", 
    itemName: ["Cluster", "Cluster"], 
    domain: "month", 
    subDomain: "day", 
    domainLabelFormat: "%b-%Y", 
    data: "data.json", 
    start: new Date(2012, 02), 
    maxDate: new Date(2013, 04), 
    cellSize: 16, 
    range: 5, animationDuration: 1000, 
    subDomainTextFormat: "%d", 
    nextSelector: "#domainDynamicDimension-next", 
    previousSelector: "#domainDynamicDimension-previous", 
    legend: [1,2,3,4,5,6,7,8,9], 
    legendCellSize: 15, 
}); 

Однако две последние категории не отображается правильно:

Однако, использование опции legendColors работает правильно (хотя я не хочу последовательной шкалы):

legendColors: { 
    empty: "#ededed", 
    min: "#40ffd8", 
    max: "#f20013" 
    } 

Кроме того, есть более эффективные способы создания категоричных цветовые гаммы для Кал-Тепловая карта?

Answer 1

Макет легенды из N значений будет генерировать легенду о цветах N + 1. Каждый цвет соответствует классу CSS, отформатированному как .q {n}.

Для этого вам нужны .q9 и класс .q10.

Помните, что .q0 не учитывается, так как это особый класс, используемый для дат со значением, равным 0.