"width":500, //canvas width
"height":500, //canvas height
"paddingLeft":60,
"paddingRight":40,
"paddingTop":50,
"paddingBottom":50,
"maxY":200,
"minY":0,
"maxX":200,
"minX":0,
これで、500×500のキャンバス内に400×400 のチャート領域ができて、ひと目盛が20の碁盤状の線が引かれます。
<script src="https://ccchart.org/js/ccchart-v1.12.01.js" charset="utf-8"></script>
<canvas id="hoge1"></canvas>
<script>
var chartdata1 = {
"config":{
"title":"heatmap",
"type":"heatmap",
"paddingLeft":60,
"paddingRight":40,
"paddingTop":50,
"paddingBottom":50,
"width":500,
"height":500,
"maxY":200,
"minY":0,
"maxX":200,
"minX":0,
"bg":"#eee"
},
"data":[
["X", 0, 48, 48, 118, 110, 177, 103, 107, 188, 191, 106, 106, 184, 195, 148, 111, 111, 110, 191, 114, 111, 196, 101, 100, 105, 196, 114, 195, 114, 165, 183, 175, 170, 187, 168, 167, 161, 166, 170, 168, 181, 173, 156, 149, 131, 167, 158, 168, 153, 107, 133, 164, 97, 114, 171, 187, 161, 155, 150, 175, 178, 170, 149, 168, 149, 184, 168, 166, 170, 185, 168, 160, 161, 166, 181, 181, 163, 184, 155, 140, 147, 171, 184, 156, 153, 194, 185, 178, 180, 183, 153, 191, 179, 189, 186, 108, 187, 184, 187, 175, 170, 100, 135, 166, 119, 159, 171, 168, 188, 188, 171, 191, 166, 164, 158, 173, 163, 181, 169, 163, 157, 181],
["Y", 0, 45, 144, 137, 137, 111, 111, 133, 116, 111, 119, 140, 119, 115, 99, 131, 130, 117, 113, 134, 135, 139, 130, 118, 119, 117, 131, 118, 116, 116, 111, 111, 107, 113, 107, 111, 107, 117, 116, 107, 114, 110, 108, 99, 85, 106, 101, 111, 95, 75, 88, 96, 69, 70, 100, 111, 101, 90, 99, 117, 114, 96, 96, 101, 103, 97, 103, 103, 111, 101, 109, 113, 103, 108, 111, 91, 94, 101, 104, 86, 91, 108, 114, 110, 101, 114, 116, 103, 113, 110, 98, 115, 110, 114, 118, 130, 114, 130, 115, 106, 109, 130, 131, 111, 130, 100, 114, 109, 115, 115, 115, 110, 101, 107, 111, 106, 109, 107, 104, 101, 95, 106]
]
}
ccchart.init("hoge1", chartdata1);
</script>
てことは、400×400の画像をはめ込んで、その画像エリアのヒートマップ表示を作ることもできるわけです。
<canvas id="hoge2"></canvas>
<script>
var chartdata2 = {
"config": {
"title": "heatmap",
"type": "heatmap",
"img": ["https://ccchart.org/img/etc/800.jpg", 60, 50, 400, 400],
"paddingLeft": 60,
"paddingRight": 40,
"paddingTop": 50,
"paddingBottom": 50,
"width": 500,
"height": 500,
"maxY": 200,
"minY": 0,
"maxX": 200,
"minX": 0,
"bg":"#eee"
},
"data":[
["X", 0, 48, 48, 118, 110, 177, 103, 107, 188, 191, 106, 106, 184, 195, 148, 111, 111, 110, 191, 114, 111, 196, 101, 100, 105, 196, 114, 195, 114, 165, 183, 175, 170, 187, 168, 167, 161, 166, 170, 168, 181, 173, 156, 149, 131, 167, 158, 168, 153, 107, 133, 164, 97, 114, 171, 187, 161, 155, 150, 175, 178, 170, 149, 168, 149, 184, 168, 166, 170, 185, 168, 160, 161, 166, 181, 181, 163, 184, 155, 140, 147, 171, 184, 156, 153, 194, 185, 178, 180, 183, 153, 191, 179, 189, 186, 108, 187, 184, 187, 175, 170, 100, 135, 166, 119, 159, 171, 168, 188, 188, 171, 191, 166, 164, 158, 173, 163, 181, 169, 163, 157, 181],
["Y", 0, 45, 144, 137, 137, 111, 111, 133, 116, 111, 119, 140, 119, 115, 99, 131, 130, 117, 113, 134, 135, 139, 130, 118, 119, 117, 131, 118, 116, 116, 111, 111, 107, 113, 107, 111, 107, 117, 116, 107, 114, 110, 108, 99, 85, 106, 101, 111, 95, 75, 88, 96, 69, 70, 100, 111, 101, 90, 99, 117, 114, 96, 96, 101, 103, 97, 103, 103, 111, 101, 109, 113, 103, 108, 111, 91, 94, 101, 104, 86, 91, 108, 114, 110, 101, 114, 116, 103, 113, 110, 98, 115, 110, 114, 118, 130, 114, 130, 115, 106, 109, 130, 131, 111, 130, 100, 114, 109, 115, 115, 115, 110, 101, 107, 111, 106, 109, 107, 104, 101, 95, 106]
]
};
ccchart.init("hoge2", chartdata2);
</script>