ID: 1

北京
搬砖小工

作者更多日志

cal-heatmap 日历热点图

7个月前 50 0

页面引入

<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.bootcss.com/cal-heatmap/3.6.2/cal-heatmap.min.js"></script>
<link href="https://cdn.bootcss.com/cal-heatmap/3.6.2/cal-heatmap.css" rel="stylesheet">
<div class="card-block"><div class="card-body"><div id="cal-heatmap"></div></div></div>
<script type="text/javascript">
var dt = new Date();
dt.setDate(dt.getDate() + 1);
var cal = new CalHeatMap();
var dataJSON = {"1578580389":2,"1578590404":5};//有数据的日子和数量
cal.init(
{
domain: 'month',//展示每月
cellSize: 20,//块儿大小
subDomainTextFormat: "%d",//块儿上显示日
range: 12,
subDomain:'x_day',//横向排列日期
rowLimit:7,//每行7列
tooltip:true,//提示
subDomainDateFormat:"%Y-%m-%d",//提示日期格式
itemName: ["条记录", "条记录"],//提示文本标题
legend: [6, 10, 14, 20],
legendHorizontalPosition: "right",//图例位置
highlight: ["now", dt],//今日高亮
data: dataJSON,//数据
displayLegend: true,//显示图例
onClick:callback,//点击触发
}
);
function callback(time) {//点击触发
var date; date= new Date(time)
var dateTime = date.getFullYear()+'-'+checkTime(date.getMonth()+1)+'-'+checkTime(date.getDate());
console.log(dateTime);
};
function checkTime(i){//转日期格式
if(i<10){
i = '0'+i
}
return i
}
</script>

没有在网上找到中文文档,机翻官网cal-heatmap.com的教程,慢慢改。

本文转载自 网络
评论
登录后才能发表评论