2014-10-30 85 views
1

我试图使用d3.js和cal-heatmap.js创建一个可视化文件,但无论我输入什么样的数据和格式,颜色都不会显示出来。我甚至无法获得最基本的默认可视化工作,也看不到任何明确的问题指标。我看到日历和单元格模板,即使有数据,它们也是空白的。使用cal-heatmap加载和可视化数据

下面是代码的示例:

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="cal-heatmap.css"> 

</head> 
<body> 

    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="cal-heatmap.min.js"></script> 

    <div id="cal-heatmap"></div> 
    <script type="text/javascript"> 
     var cal = new CalHeatMap(); 

     cal.init({ 
      data : "aggregates.json", 
      id : "cal-heatmap", 
      domain : "month", 
      subDomain : "x_day", 
      cellsize: 15, 
      cellpadding: 3, 
      domainGutter: 15 
     }); 
    </script> 

</body> 
</html> 

而且数据的一个样品。

{ 
    "1258185600": 2.77, 
    "1258272000": 2.52, 
    "1258358400": 3.23, 
    "1258444800": 2.06, 
    "1258617600": 2.62, 
    "1258704000": 3.9, 
    "1258790400": 3.41, 
    "1258963200": 0, 
    "1259049600": 0, 
    "1259049600": 0, 
    "1259136000": 3.16, 
    "1259308800": 2.97, 
    "1259395200": 2.79, 
    "1259481600": 3.65, 
    "1259654400": 1.9, 
    "1259654400": 1.93, 
    "1259740800": 3.46, 
    "1259827200": 3.93, 
    "1260000000": 4.1 
} 

回答

1

在您的样本数据的第一时间戳是从2009年11月你必须定制CAL-热图您的特定数据源,从而使日历显示为您的数据日期范围的日历,否则会显示日历从今天开始。

start属性设置为new Date(2009, 10, 1)