33 lines
939 B
HTML
33 lines
939 B
HTML
|
<script type="text/javascript" src="https://syui.ai/bower_components/d3/d3.min.js"></script>
|
||
|
|
<script type="text/javascript" src="https://syui.ai/bower_components/cal-heatmap/cal-heatmap.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://syui.ai/bower_components/cal-heatmap/cal-heatmap.css" />
|
||
|
|
<div id="example-b"></div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var currentTime = new Date();
|
||
|
|
var year = currentTime.getFullYear()
|
||
|
|
var cal = new CalHeatMap();
|
||
|
|
cal.init({
|
||
|
|
itemSelector: "#example-b",
|
||
|
|
domain: "month",
|
||
|
|
data: "https://syui.ai/json/cal.json",
|
||
|
|
start: new Date(year, 0),
|
||
|
|
cellSize: 9,
|
||
|
|
range: 13,
|
||
|
|
legendColors: ["#fff700", "#817d01"],
|
||
|
|
previousSelector: "#example-b-PreviousDomain-selector",
|
||
|
|
nextSelector: "#example-b-NextDomain-selector",
|
||
|
|
legend: [2, 4, 6, 8],
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
div#example-b{
|
||
|
|
background: #f1f1f1;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
.cal-heatmap-container {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|