<canvas id="hoge0-1"></canvas> <script> ccchart.base('white'); var data1 = [ ["月",1,2,3,4,5,6,7,8], ["ウーロン",20,23,12,20,42,50,43,56], ["コーヒー",52,50,44,50,60,55,68,80] ]; var conf = { "title": "data1", "type": "bar", "width": 500, "height": 380, "useVal": "yes", "useToolTip": "yes", }; ccchart .init('hoge0-1', { "config": conf, "data": data1 }) </script>
<canvas id="hoge0-2"></canvas> <script> var data2 = [ ["月",1,2,3,4,5,6,7,8], ["ウーロン",80,150,120,120,100,80,100,140], ["コーヒー",100,120,150,260,180,150,170,220] ]; var conf = { "title": "data2", "type": "line", "bg": "white", "minY": 0, "maxY": 300, "width": 500, "height": 380, "useVal": "yes" }; ccchart .init('hoge0-2', { "config": conf, "data": data2 }) </script>
<canvas id="hoge0-3"></canvas> <script> var header = data1[0]; var body1 = data1.slice(1); var body2 = data2.slice(1); var data3 = []; var percent = 0; data3.push(header); for(var row = 0; row < body1.length ; row++){ data3_wk = []; data3_wk.push(body1[row][0]) for(var col = 1; col < body1[row].length ; col++){ percent = Math.round(body1[row][col] * 100/body2[row][col] ); data3_wk.push(percent); } data3.push(data3_wk); } var conf = { "title": "data3(%) = data1*100/data2", "unit": { "unit": "%", "left": 15, "top": 60, "align": "left", "color": "#888", "font": "100 12px 'Arial'" }, "type": "bar", "width": 500, "height": 380, "minY": 0, "maxY": 100, "useToolTip": "yes", "useVal": "yes" }; ccchart .init('hoge0-3', { "config": conf, "data": data3 }) </script>