主となるソースは下記。
var char; $(document).ready(function() { chart = new Highcharts.Chart( { chart: { renderTo: 'chart_test3', }, title: { text: '東京電力電力メータ4/26' }, subtitle: { text: 'サブタイトル' }, xAxis: { categories: ["0:00","1:00","2:00","3:00","4:00","5:00","6:00","7:00","8:00","9:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"], title:{ text : '時間帯' } }, yAxis: { title: { text: '供給電力(万kW)' } }, series: [ { type : 'area', name :'ピーク供給量', data : [ 4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,4000,], }, { type : 'column', name :'当日実績(万kW)', data : [ 2426,2343,2315,2295,2297,2344,2568,2758,3008,3198,3229,3240,3062,3257,3241,3209,3229,0,0,0,0,0,0,0, ], }, { type : 'line', name :'前日実績(万kW)', data : [ 2509,2402,2350,2299,2270,2217,2271,2359,2469,2566,2601,2604,2605,2582,2564,2563,2610,2717,2960,3025,2965,2870,2750,2602, ] }, ] }); });
まあ、ここまでの整形はcsvを読み込んでperlでやっているのだが。
04 /
01 / 03 / 05 / 06 /
07 / 08 / 09 / 10 /
01 / 02 / 03 / 04 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 05 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /
01 / 02 / 03 / 04 / 05 / 06 /
07 / 08 / 09 / 10 / 11 / 12 /