==TEST==

Heatmap test ヒートマップ を写真に埋め込む テスト

heatmap タイプでは height: 400px, width: 400px のチャート領域を作る時、 maxX,minX を利用して、下記のようにチャート領域サイズを固定できます。
    "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="http://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": ["http://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>