2

我正在尝试为 9 个类别（标记为 1-9）创建一个带有定性颜色图例的cal-heatmap 。我正在使用以下 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,
});

但是最后两个类别没有正确渲染：

cal-heatmap 图例问题

但是，使用该legendColors选项可以正常工作（尽管我不想要顺序缩放）：

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

cal-heatmap 正确渲染

此外，是否有更好的方法为 cal-heatmap 创建分类色标？

4

1 回答 1

3

N 个值的图例数组将生成 N + 1 种颜色的图例。每种颜色对应一个 CSS 类，格式类似于 .q{n}。

所以你需要一个.q9和一个.q10类。

请记住，这.q0不计算在内，因为它是用于日期等于 0 的特殊类。

于 2013-10-26T19:48:14.760 回答