Question

我正在尝试使用cal-heatmap，我想提供一个简单的图例颜色数组，而不是为每种颜色定义CSS类。

到目前为止，在我的测试中，这似乎不可能？

例如，使用：

legendColors : ['rgb(103,0,31)','rgb(178,24,43)','rgb(214,96,77)','rgb(244,165,130)','rgb(253,219,199)','rgb(224,224,224)','rgb(186,186,186)','rgb(135,135,135)','rgb(77,77,77)','rgb(26,26,26)'],

给我一个从第一种颜色到第二种颜色的10级步长，忽略其余颜色。

我在文档中遗漏了一些简单的内容，或者这是不可能的？

我知道我可以创建CSS类，但我不想这样做 - 我需要动态，可变数量的类别，动态创建颜色。

Answer 1

我查看了API和源代码，但似乎不可能。想到两个想法：

一，事后修好：

 cal.init({
   range: 10,
   start: new Date(2000, 0, 1, 1),
   data: "datas-hours.json",
   onComplete: function() {
     setTimeout(function(){
       ['rgb(103,0,31)','rgb(178,24,43)','rgb(214,96,77)','rgb(244,165,130)','rgb(253,219,199)','rgb(224,224,224)','rgb(186,186,186)','rgb(135,135,135)','rgb(77,77,77)','rgb(26,26,26)']
        .forEach(function(d,i){               
           d3.selectAll("rect.r" + i)
             .style("fill", d);
           });
        }, 10);
  }

我不确定为什么setTimeout是必要的，这会在颜色交换时产生奇怪的“闪光”效果。示例here。

另一个想法是写the styles on the fly：

var style = document.createElement('style');
style.type = 'text/css';
['rgb(103,0,31)','rgb(178,24,43)','rgb(214,96,77)','rgb(244,165,130)','rgb(253,219,199)','rgb(224,224,224)','rgb(186,186,186)','rgb(135,135,135)','rgb(77,77,77)','rgb(26,26,26)']
  .forEach(function(d,i){
    style.innerHTML += ".q" + i + " {fill:" + d + "; background-color: " + d + "}";
  });
document.getElementsByTagName('head')[0].appendChild(style);

var cal = new CalHeatMap();
cal.init({
  range: 10,
  start: new Date(2000, 0, 1, 1),
  data: "datas-hours.json"
});

示例here。

不确定我喜欢这些选项中的任何一个。您可能更好地分配存储库，添加所需内容并提交拉取请求。向下看第3278行并用你的序数换掉那个色标。

cal-heatmap - legendColors作为颜色值数组？

1 个答案: