質問編集履歴

1

コードブロック、具体的な追記

2017/06/11 10:36

投稿

mikomal
mikomal

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,90 @@
1
+ ###前提・実現したいこと
2
+
3
+ Javascriptで、エクセルのピボットテーブルのようなクロス分析を実現したいです。
4
+
5
+ http://qiita.com/sebisawa/items/7ddd70fb7b14420902ae> こちらのサイトのコードを参考に作成しております。
6
+
1
- いつもお世話になっております。
7
+ 下記該当のソースコードの中の、
8
+
9
+ src_data_fields
10
+
11
+ src_data
12
+
13
+ pivot_row_field
14
+
15
+ pivot_val_field
16
+
17
+ pivot_col_fields
18
+
19
+ の値を、コード内に直打ちするのではなく、html上のセレクトボックスから選択できるようにしたいです。
20
+
21
+ 下記のsrc_dataはcsvデータ(data.csv)で保存してあり、sqlによりテーブルは作ってあります。
22
+
23
+ ```csv
24
+
25
+ shop, staff, month, sales
26
+
27
+ 新宿, 山田, 5月, 100
28
+
29
+ 新宿, 山田, 6月, 200
30
+
31
+ 渋谷, 田中, 5月, 300
32
+
33
+ 渋谷, 佐藤, 6月, 400
34
+
35
+ ```
2
36
 
3
37
 
4
38
 
5
- http://qiita.com/sebisawa/items/7ddd70fb7b14420902ae
6
-
7
- こちらのサイトのコードを参考に、Javascriptでクロス分析表を出力のですが、
39
+ ###発生る問題・エラーメッセージ
8
40
 
9
41
 
42
+
43
+
44
+
45
+
46
+
47
+ ###該当のソースコード
48
+
49
+ ```html
50
+
51
+ <select name="row" id="row_field">
52
+
53
+ <option value="サンプル1">サンプル1</option>
54
+
55
+ <option value="サンプル2">サンプル2</option>
56
+
57
+ <option value="サンプル3">サンプル3</option>
58
+
59
+ </select>
60
+
61
+ <select name="val" id="val_field">
62
+
63
+ <option value="サンプル1">サンプル1</option>
64
+
65
+ <option value="サンプル2">サンプル2</option>
66
+
67
+ <option value="サンプル3">サンプル3</option>
68
+
69
+ </select>
70
+
71
+ <select name="col" id="col_field">
72
+
73
+ <option value="サンプル1">サンプル1</option>
74
+
75
+ <option value="サンプル2">サンプル2</option>
76
+
77
+ <option value="サンプル3">サンプル3</option>
78
+
79
+ </select>
80
+
81
+
82
+
83
+ ```
84
+
85
+
86
+
87
+ ```Javascript
10
88
 
11
89
  var src_data_fields = [ "shop", "staff", "month", "sales" ];
12
90
 
@@ -34,30 +112,38 @@
34
112
 
35
113
 
36
114
 
37
- このように元データ、設定条件をコード内に入力しなければなりません。
115
+ ```
38
-
39
- これをセレクトボックス形式で、csvデータから選べるようにしたいです。
40
116
 
41
117
 
42
118
 
119
+ ###試したこと
120
+
121
+ ```Javascript
122
+
123
+ var src_data_fields = [ "shop", "staff", "month", "sales" ];→ここはcsvから一行目を取得する方法がわからずいじれていません。
124
+
43
- csvデータは、sqlで全てテーブルを作ってあります。
125
+ var src_data = alasql('select * from data');
44
126
 
45
127
 
46
128
 
47
- 例えば、
129
+ // 設定条件
48
130
 
49
- shop, staff, month, sales
131
+ var pivot_row_field = $('#row_field').val();
50
132
 
51
- 新宿, 山田, 5月, 100
133
+ var pivot_val_field = $('#val_field').val();
52
134
 
53
- 新宿, 山田, 6月, 200
135
+ var pivot_col_fields = $('#col_field').val();
54
136
 
55
- 渋谷, 田中, 5月, 300
137
+ ```
56
-
57
- 渋谷, 佐藤, 6月, 400
58
-
59
- 以上のようなcsvデータ(data.csv)から上記urlのサイトと同じような分析結果を得るためには、上でコピペした部分をどのように変更すればいいのでしょうか。出力先となるhtmlも合わせて教えていただけるとありがたいです。
60
138
 
61
139
 
62
140
 
141
+ ###補足情報(言語/FW/ツール等のバージョンなど)
142
+
143
+ 実行環境がないため試せていませんが、こうすれば良いのではと考えています。
144
+
145
+ pivottable.jsのようなライブラリは使えません。
146
+
147
+ まだ投稿に慣れていないため、不明な点などありましたらご指摘をお願いします。
148
+
63
- よろしくお願いいたします。
149
+ よろしくお願いします。