• R/O
  • SSH
  • HTTPS

opengion: Commit


Commit MetaInfo

Revision1398 (tree)
Zeit2017-02-16 10:48:36
Autortakahashi_m

Log Message

(empty log message)

Ändern Zusammenfassung

Diff

--- trunk/opengionV5/uap/webapps/gf/src/org/opengion/hayabusa/taglib/JsChartTag.java (revision 1397)
+++ trunk/opengionV5/uap/webapps/gf/src/org/opengion/hayabusa/taglib/JsChartTag.java (revision 1398)
@@ -16,7 +16,13 @@
1616 /**
1717 * JsChart は、JavascriptのjsChart用のスクリプトを出力するクラスです。
1818 * 複数の JsChartData オブジェクトを合成することも、ここで行っています。
19+ * ChartJSを利用しているため、標準属性以外の項目をセットする場合はoptionAttributesで行ってください。
20+ * 例えばアニメーションをOFFにする場合はanimation:falseをセットします。
1921 *
22+ * 出力されるスクリプトでは、idを指定しない場合はhybscanvas[tableId]が利用されます。
23+ * 複数のグラフを同一画面で出力する場合はidかtableIdを変えてください。
24+ * チャートオブジェクトはchart_[id]という名前で作成されるため、ajax等でコントロールが必要な場合は利用してください。
25+ *
2026 * @og.formSample
2127 * ●形式:<og:column chartType="…" ... />
2228 * ●body:あり(EVAL_BODY_BUFFERED:BODYを評価し、{$#064;XXXX} を解析します)
@@ -27,7 +33,7 @@
2733 * id 【TAG】canvasタグのidを指定します。(初期値:hybscanvas)
2834 * height 【TAG】チャートの高さを指定します。(初期値:400)
2935 * width 【TAG】チャートの幅を指定します。(初期値:400)
30- * labelColumn 【TAG】ラベルのカラム名を指定します。
36+ * labelColumn 【TAG】ラベルのカラム名を指定します。(表示名称)
3137 * title 【TAG】タイトルを指定します。
3238 * titlePosition 【TAG】タイトルの表示位置[top/right/bottom/left]を指定します。(初期値:top)
3339 * ylabel 【TAG】x軸のラベルを指定します。
@@ -117,8 +123,11 @@
117123 private static final String[] TYPE_XSCALE = new String[] { "category", "time", "linear" };
118124 private static final String[] TYPE_YSCALE = new String[] { "linear", "category" };
119125 private static final String[] TYPE_BOOLEAN = new String[] { "true", "false" };
126+
127+ private static final String CANVAS_NAME = "hybscanvas";
128+
120129 // 変数宣言
121- private String id = "hybscanvas"; // canvasタグのid
130+ private String id = null; // canvasタグのid
122131 private String height = "400"; // canvasタグのheight
123132 private String width = "400"; // canvasタグのwidth
124133 private String chartType = null; // チャートタイプ
@@ -162,7 +171,7 @@
162171 @Override
163172 protected void release2() {
164173 super.release2();
165- id = "hybscanvas";
174+ id = null;
166175 height = "400";
167176 width = "400";
168177 chartType = null;
@@ -241,6 +250,8 @@
241250 public int doEndTag() {
242251 debugPrint();
243252
253+ id = (id==null ? CANVAS_NAME + tableId : id ); // id指定なしの場合はCANVAS_NAME+tableId
254+
244255 // jsChart出力
245256 jspPrint( jsChartOutput() );
246257
@@ -255,6 +266,13 @@
255266 */
256267 private String jsChartOutput() {
257268 StringBuilder rtn = new StringBuilder( HybsSystem.BUFFER_MIDDLE );
269+
270+ // 各JavaScriptの変数名
271+ String qd = "qd_" + id; //queryData
272+ String cd = "cd_" + id; //chartData
273+ String myChart = "chart_"+id;
274+ String lblClm = labelColumn + id;
275+
258276
259277 // JSON形式でテーブル情報を取得
260278 ViewForm form = ViewFormFactory.newInstance( "JSON" );
@@ -261,20 +279,20 @@
261279 form.init( table );
262280
263281 // canvasタグの設定
264- rtn.append( "<canvas id=\"" ).append( id ).append( "\" width=\"" ).append( width ).append( "\" height=\"" ).append( height ).append( "\"><!-- --></canvas>" );
282+ rtn.append( "<canvas class=\"").append( CANVAS_NAME).append( "\" id=\"" ).append( id ).append( "\" width=\"" ).append( width ).append( "\" height=\"" ).append( height ).append( "\"><!-- --></canvas>" );
265283
266284 rtn.append( "<script>" );
267285 // query情報の取得(JSON)
268- rtn.append( "var qd = " ).append( form.create() );
286+ rtn.append( "var ").append( qd ).append(" = " ).append( form.create() );
269287
270288 // jsChartDataタグの変数宣言
271289 for( int i = 0; i < jsChartData.size(); i++ ) {
272290 rtn.append( " var " ).append( jsChartData.get( i ).getChartColumn() ).append( " = [];" );
273291 }
274- rtn.append( "var " ).append( labelColumn ).append( " = [];" );
292+ rtn.append( "var " ).append( lblClm ).append( " = [];" );
275293
276- // query情報をjsChartDataの変数に入れ替え
277- rtn.append( "for(var i=0; i < qd.DATA.length; i++){" );
294+ // query情報をjsChartDataの変数に入れ替え
295+ rtn.append( "for(var i=0; i < ").append( qd ).append( ".DATA.length; i++){" );
278296 for( int i = 0; i < jsChartData.size(); i++ ) {
279297 String chartColumn = jsChartData.get( i ).getChartColumn();
280298
@@ -281,14 +299,14 @@
281299 // x軸がlinearスケールの場合
282300 if( "linear".equals( xscaleType ) ) {
283301 // {x:ラベル, y:値}の形式で値を設定
284- rtn.append( chartColumn ).append( "[i] = {x:qd.DATA[i]." ).append( labelColumn ).append( ",y:qd.DATA[i]." ).append( chartColumn ).append( "};" );
302+ rtn.append( chartColumn ).append( "[i] = {x:").append(qd).append(".DATA[i]." ).append( labelColumn ).append( ",y:").append(qd).append(".DATA[i]." ).append( chartColumn ).append( "};" );
285303 }
286304 else {
287305 // その他は値を設定
288- rtn.append( chartColumn ).append( "[i] = qd.DATA[i]." ).append( chartColumn ).append( ";" );
306+ rtn.append( chartColumn ).append( "[i] = ").append(qd).append( ".DATA[i]." ).append( chartColumn ).append( ";" );
289307 }
290308 }
291- rtn.append( labelColumn ).append( "[i] = qd.DATA[i]." ).append( labelColumn ).append( ";" );
309+ rtn.append( lblClm ).append( "[i] = ").append( qd ).append( ".DATA[i]." ).append( labelColumn ).append( ";" );
292310 rtn.append( "}" );
293311
294312 // y軸にカテゴリースケールを設定した場合
@@ -306,8 +324,8 @@
306324 }
307325
308326 // jsChartDataの設定
309- rtn.append( "var cd = {" );
310- rtn.append( "labels:" ).append( labelColumn );
327+ rtn.append( "var ").append( cd ).append(" = {" );
328+ rtn.append( "labels:" ).append( lblClm );
311329 // y軸にカテゴリースケールを設定した場合
312330 if( "category".equals( yscaleType ) ) {
313331 rtn.append( ",yLabels:ycateList" );
@@ -322,12 +340,12 @@
322340 rtn.append( "]};" );
323341
324342 // jsChartの生成
325- rtn.append( "var myChart = new Chart(" ).append( id ).append( ",{" );
343+ rtn.append( "var ").append( myChart ).append(" = new Chart(" ).append( id ).append( ",{" );
326344 rtn.append( "type:'" ).append( chartType ).append( "'" );
327- rtn.append( ",data:cd" );
345+ rtn.append( ",data:").append(cd);
328346 rtn.append( ",options:{" );
329347 rtn.append( "responsive:false" ); // レスポンシブ OFF
330- rtn.append( ",animation:false" ); // アニメーション OFF
348+// rtn.append( ",animation:false" ); // アニメーション OFF
331349
332350 // クリックイベントの設定
333351 if( onClick != null && onClick.length() > 0 ) {
Show on old repository browser