ボタンを押したときに表示

下のプログラムでボタンを押した後に表示させたいのですが、書き方がわからないので、教えて頂けたらとおもい投稿しました。

行動規範の内容に同意します

回答2件

ふたたび・・・まとめるとこんな感じですかね

html
1<input type="button" name="button1" id="button1" value="表示">

※input タグの onClick="hyouji()" は削除

javascript
1
2// 追加データリスト
3var arr = [ 
4           ["2015/11/10", "11:00:00","00:30:00"], 
5           ["11:01:00",141, 61], 
6           ["11:02:00",142, 62], 
7           ["11:03:00",143, 63], 
8           ["11:04:00",144, 64], 
9           ["11:05:00",145, 65] 
10]; 
11
12var arr2 = []; 
13
14// 追加データから必要データのみ抽出
15for(var i = 1; i < arr.length; i++){ 
16    arr2[i-1] = [ arr[i][0], arr[i][2] ]; 
17} 
18
19google.load("visualization", "1", {packages:["corechart"]}); 
20google.setOnLoadCallback( 
21function() { 
22
23  // onload による最初のグラフ描画処理
24  var arr3 = [
25    [ '時間', '強度' ]
26  ];
27
28  var chartdata = new google.visualization.DataTable();
29
30  chartdata.addColumn('string', arr3[0][0]);
31  chartdata.addColumn('number', arr3[0][1]);
32
33  for( var i=1; i<arr3.length; i++ ){  
34    chartdata.addRow( arr3[i] );  
35  }  
36
37  var options = { 
38    height: 300, 
39    width: 350, 
40    bar: {groupWidth: "95%"}, 
41    title: '運動強度', 
42    hAxis: {title: '時間'}, 
43    vAxis:{minValue:50,maxValue:100,gridlined:{count:6 }} 
44  }; 
45
46  var chart = new google.visualization.ColumnChart(document.getElementById('gct_sample_column')); 
47  chart.draw(chartdata, options); 
48
49  // button1のクリックイベントハンドラ
50  document.getElementById('button1').onclick = function(){
51
52    // chartdata に arr2 のデータを追加してグラフ再描画
53    for( var i=0; i<arr2.length; i++ ){  
54      chartdata.addRow( arr2[i] );
55    }
56  
57    chart.draw(chartdata, options);
58 
59  }
60
61});

投稿2015/11/25 09:38

編集2015/11/25 09:48

takito

総合スコア3111

ベストアンサー

初心者で使ったことは無いですが、動きそうなのができたので回答します。

html
1 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
2</head> 
3<body> 
4    <input type="button" name="button1" id="button1" value="表示" onClick="hyouji()"> 
5<br/> 
6<br/> 
7
8<script type="text/javascript"> 
9    var arr = [ 
10            ["2015/11/10", "11:00:00","00:30:00"], 
11            ["11:01:00",141, 61], 
12            ["11:02:00",142, 62], 
13            ["11:03:00",143, 63], 
14            ["11:04:00",144, 64], 
15            ["11:05:00",145, 65] 
16    ]; 
17     
18
19    var arr2 = []; 
20
21
22    for(var i = 1; i < arr.length; i++){ 
23        arr2[i-1] = [ arr[i][0], arr[i][2] ]; 
24    } 
25
26
27    google.load("visualization", "1", {packages:["corechart"]});   
28    function hyouji() {  
29
30    var arr3 = [ 
31        [ '時間', '強度' ] 
32    ]; 
33
34  chartdata = new google.visualization.DataTable(); 
35
36  chartdata.addColumn('string', arr3[0][0]); 
37  chartdata.addColumn('number', arr3[0][1]); 
38
39  for( var i=1; i<arr3.length; i++ ){   
40    chartdata.addRow( arr3[i] );   
41  }   
42
43  for( var i=0; i<arr2.length; i++ ){   
44    chartdata.addRow( arr2[i] );   
45  }   
46
47            var options = { 
48        height: 300, 
49        width: 500, 
50        bar: {groupWidth: "95%"}, 
51                title: '運動強度', 
52                hAxis: {title: '時間'}, 
53        vAxis:{minValue:50,maxValue:100,gridlined:{count:6 }} 
54         
55             }; 
56
57  // グラフの描画 
58  var chart = new google.visualization.ColumnChart(document.getElementById('gct_sample_column'));  
59  chart.draw(chartdata, options);  
60
61} 
62</script> 
63<div id="gct_sample_column" style="width:80%; height:250pt" ></div> 
64</body> 
65