001/* 002 * Copyright (c) 2009 The openGion Project. 003 * 004 * Licensed under the Apache License, Version 2.0 (the "License"); 005 * you may not use this file except in compliance with the License. 006 * You may obtain a copy of the License at 007 * 008 * http://www.apache.org/licenses/LICENSE-2.0 009 * 010 * Unless required by applicable law or agreed to in writing, software 011 * distributed under the License is distributed on an "AS IS" BASIS, 012 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 013 * either express or implied. See the License for the specific language 014 * governing permissions and limitations under the License. 015 */ 016package org.opengion.hayabusa.taglib; 017 018import java.util.ArrayList; 019import java.util.List; 020import java.util.Set; // 6.4.3.4 (2016/03/11) 021import java.util.Iterator; // 6.7.7.0 (2017/03/31) 022import java.util.function.IntFunction; // 7.0.1.3 (2018/11/12) 023 024// import org.opengion.fukurou.system.BuildNumber; // 7.0.1.2 (2018/11/04) 025import org.opengion.hayabusa.common.HybsSystem; 026import org.opengion.hayabusa.common.HybsSystemException; 027import org.opengion.hayabusa.db.DBTableModelSorter; 028import org.opengion.hayabusa.db.DBTableModel; 029import org.opengion.hayabusa.db.DBColumn; // 6.8.3.1 (2017/12/01) 030import org.opengion.hayabusa.io.JsChartDataV3; // 7.0.1.1 (2018/10/22) 031 032import org.opengion.fukurou.util.ArraySet; // 6.4.3.4 (2016/03/11) 033import org.opengion.fukurou.util.ToString; 034import org.opengion.fukurou.util.StringUtil; // 6.8.3.1 (2017/12/01) 035import org.opengion.fukurou.util.ColorMap; // 7.0.1.3 (2018/11/12) 036import static org.opengion.fukurou.util.StringUtil.nval ; 037 038/** 039 * JsChartV3 は、JavascriptのjsChart用のスクリプトを出力するクラスです。 040 * 複数の JsChartDataV3 オブジェクトを合成することも、ここで行っています。 041 * ChartJSのVer3を利用しているため、標準属性以外の項目をセットする場合はoptionAttributesで行ってください。 042 * 043 * 出力されるスクリプトでは、idを指定しない場合はhybscanvas[tableId]が利用されます。 044 * 複数のグラフを同一画面で出力する場合はidかtableIdを変えてください。 045 * チャートオブジェクトはchart_[id]という名前で作成されるため、ajax等でコントロールが必要な場合は利用してください。 046 * 047 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html">とほほのChart.js入門</a> 048 * 049 * ChartのGlobal Configurationとして、Chart.defaults.**** が指定できる。これは本タグでは 050 * 用意していないが、グローバルなので、タグの前に個別に記述しておくことで適用される。 051 * 052 * <a href="https://www.chartjs.org/docs/latest/configuration/">Configuration</a> 053 * 054 * @og.formSample 055 * ●形式:<og:jsChartV3 chartType="…" ... /> 056 * ●body:あり(EVAL_BODY_BUFFERED:BODYを評価し、{$#064;XXXX} を解析します) 057 * 058 * ●Tag定義: 059 * <og:jsChartV3 060 * chartType ○【TAG】チャートの種類(type属性)を指定します[line/bar/radar/polarArea/pie/doughnut/bubble/scatter](必須) 061 * horizontalBar 廃止 → indexAxis="y" 指定verticalLine 相当の表示も indexAxis="y" 指定 062 * labelColumn ○【TAG】ラベルのカラム名(data:labels属性)を指定します(表示名称)(必須) 063 * id 【TAG】canvasタグのidを指定します(初期値:hybscanvas) 064 * height 【TAG】チャート(canvasタグ)の高さを指定します(初期値:400px) 065 * width 【TAG】チャート(canvasタグ)の幅を指定します(初期値:400px) 066 * plugins 【TAG】プラグイン定義された関数を指定します(plugins) // 6.9.9.2 (2018/09/18) 067 * =================== options: 以下の属性 068 * (V3) indexAxis 【TAG】"y" を指定することで、horizontalBar や verticalLine を実現する(options:indexAxis) 8.0.0.0 (2021/08/31) 新規追加 069 * barWidthPer 【TAG】棒線の横幅を指定します(初期値:0.8, typeがbar の場合に有効)(option:categoryPercentage) 070 * animation 【TAG】簡易的にアニメーションのON/OFFを設定(true/false)します(初期値::null=true)(options:animation) 071 * onClick 【TAG】チャートクリック時のイベントを指定します(options:onClick) 072 * optOptions 【TAG】optionsの要素に、その他オプションを追加します 073 * =================== options:scales:x: 以下の属性 074 * xscaleType 【TAG】x軸のスケールタイプ[category/linear/time/realtime]を指定します(type[初期値:category]) 075 * xposition 【TAG】x軸の表示位置[top/right/bottom/left]を指定します(初期値:bottom)(position) 076 * xmax 【TAG】x軸の最大値を指定します(xscaleTypeがlinearの場合に有効)(max) 077 * xmin 【TAG】x軸の最小値を指定します(xscaleTypeがlinearの場合に有効)(min) 078 * xlabel 【TAG】x軸のラベルを指定します(title:text) 079 * xscaleCallback 【TAG】x軸コールバックを指定します(ticks:callback) 080 * xbeginAtZero 【TAG】x軸を0から書き始まるかどうか(xscaleTypeがlinearの場合に有効)(beginAtZero[初期値:null(=false)]) 081 * xstepSize 【TAG】x軸のメモリ幅を指定します(xscaleTypeがlinearの場合に有効)(ticks:stepSize) 082 * optAxis 【TAG】その他options:scales:x のオプションを追加します 083 * optTicks 【TAG】その他options:scales:x:ticksのオプションを追加します 084 * (V3) optTitle 【TAG】その他options:scales:x:titleのオプションを追加します 8.0.0.0 (2021/08/31) 新規追加 085 * (V3) optGrid 【TAG】その他options:scales:x:gridのオプションを追加します 8.0.0.0 (2021/08/31) 新規追加 086 * =================== options:scales:x:time: 以下の属性(xscaleTypeがtimeの場合に有効) 087 * timeUnit 【TAG】x軸のタイムの単位[year/quarter/month/week/day/hour/minute/second/millisecond]を指定(unit)します(指定しない場合は自動) 088 * timeUnitStepSize 【TAG】x軸のタイムの単位幅を指定します(stepSize) 089 * (V3) timeParser 【TAG】x軸の設定するタイム(入力データ)のフォーマットを指定します ・・・ 廃止 → time.parser になったが使い方不明 8.0.0.0 (2021/08/31) 新規追加 090 * timeLblFormat 【TAG】x軸の表示するタイムのフォーマットを指定します(time:displayFormats:year~secondまで同じ値を設定) → displayFormats 091 * tooltipFormat 【TAG】時間のツールチップに使用するフォーマット(tooltipFormat) 092 * =================== options:plugins: 以下の属性 093 * title 【TAG】タイトル、またはタイトル要素を指定します(title:text) 094 * titlePosition 【TAG】タイトルの表示位置[top/right/bottom/left]を指定します(title:position:初期値 top) 095 * legendDisplay 【TAG】凡例を表示するか[true/false]を指定します(legend:display) 096 * legendPosition 【TAG】凡例の表示位置[top/right/bottom/left]を指定します(legend:position) 097 * usePointStyle 【TAG】凡例のスタイル属性を使用するかどうか[true/false]を指定します(legend:labels:usePointStyle) 098 * (V3) optPlugins 【TAG】options:pluginsの要素に、その他オプションを追加します 099 * (V3) optTooltip 【TAG】options:plugins:tooltip の要素に、その他オプションを追加します 100 * (V3) optLegend 【TAG】options:plugins:legend の要素に、その他オプションを追加します 101 * =================== options:plugins:annotation:annotations:(CSVで指定した分のline0): 以下の属性 102 * markValues 【TAG】y軸に横マーカーラインの設定値をCSV形式で複数指定します(yMin:値,yMax:値) 103 * markColors 【TAG】y軸に横マーカーラインの色をCSV形式で複数指定します(borderColor) 104 * markLbls 【TAG】y軸に横マーカーラインのラベルをCSV形式で複数指定します(未指定時はラベルを表示しません)(label:content) 105 * markAdjust 【TAG】y軸に横マーカーラインのラベル表示位置の上(-)下(+)方向を調整します(yAdjust:初期値 -6) 106 * xmarkLbls 【TAG】x軸に横マーカーラインのラベルをCSV形式で複数指定します(未指定時はラベルを表示しません)(label:content) 107 * xmarkValues 【TAG】x軸に縦マーカーラインの設定値をCSV形式で複数指定します(xMin:値,xMax:値) 108 * xmarkColors 【TAG】x軸に縦マーカーラインの色をCSV形式で複数指定します // 7.0.1.1 (2018/10/22) 109 * markWidth 【TAG】x軸,y軸全マーカーライン共通のラインの幅を指定します(borderWidth:初期値 2) // 7.0.1.1 (2018/10/22) 110 * markDash 【TAG】x軸,y軸全マーカーライン共通のラインに点線を指定([5,2]など)します:(borderDash:初期値 null) // 7.0.1.1 (2018/10/22) 111 * markFontSize 【TAG】x軸,y軸全マーカーライン共通のラベルのフォントサイズを指定します:(label:font:size:初期値 10) 112 * =================== options:plugins:zoom: 以下の属性 113 * useZoom 【TAG】WheelZoom処理を使用するかどうか[true/false]を指定します(options:plugins:zoom:zoom:) 114 * useDragZoom 【TAG】DragZoom処理を使用するかどうか[true/false]を指定します(options:plugins:zoom:zoom:) 115 * =================== 116 * useZeroDataOmit 【TAG】データが0の場合、使用しない(除外する)かどうかを指定します[true:0データを除外する](初期値:false) 117 * useRenderer 【TAG】データ出力でレンデラを利用するかどうか[true/false]を指定します(初期値:false) 118 * sortColumn 【TAG】検索結果をこのカラムでソートしなおします(初期値:null) 119 * valueQuot 【TAG】値の前後にクオートをはさむかどうか[true/false]指定します 120 * varColumns 【TAG】TableModelの指定のカラムをconstの配列変数として出力します // 7.0.1.2 (2018/11/04) 121 * =================== 122 * optChart 【廃止】chartの属性に、TLDで未定義の属性を追加します 8.0.0.0 (2021/08/31) 廃止(代替えはありません) 123 * optScaleLabel 【廃止】optTitle を使用してください(旧 scaleLabel) 8.0.0.0 (2021/08/31) 廃止 124 * optGridLines 【廃止】optGrid を使用してください(旧 gridLines) 8.0.0.0 (2021/08/31) 廃止 125 * timeMax 【廃止】廃止 → xmaxを使用してください 8.0.0.0 (2021/08/31) 廃止 126 * timeMin 【廃止】廃止 → xminを使用してください 8.0.0.0 (2021/08/31) 廃止 127 * timeSetFormat 【廃止】廃止 → timeParserを使用してください 8.0.0.0 (2021/08/31) 廃止 128 * =================== 129 * tableId 【TAG】(通常は使いません)sessionから所得する DBTableModelオブジェクトの ID 130 * scope 【TAG】キャッシュする場合のスコープ[request/page/session/application]を指定します(初期値:session) 131 * caseKey 【TAG】このタグ自体を利用するかどうかの条件キーを指定します(初期値:null) 132 * caseVal 【TAG】このタグ自体を利用するかどうかの条件値を指定します(初期値:null) 133 * caseNN 【TAG】指定の値が、null/ゼロ文字列 でない場合(Not Null=NN)は、このタグは使用されます(初期値:判定しない) 134 * caseNull 【TAG】指定の値が、null/ゼロ文字列 の場合は、このタグは使用されます(初期値:判定しない) 135 * caseIf 【TAG】指定の値が、true/TRUE文字列の場合は、このタグは使用されます(初期値:判定しない) 136 * debug 【TAG】デバッグ情報を出力するかどうか[true/false]を指定します(初期値:false) 137 * > ... Body ... 138 * </og:jsChartV3> 139 * 140 * ●使用例 141 * <og:jsChartV3 142 * chartType = "[line/bar/radar/polarArea/pie/doughnut/bubble/scatter]" 143 * labelColumn = "LDATA" 144 * id = "hybscanvas" 145 * height = "400px" 146 * width = "400px" 147 * title = "タイトル" または "{display:true,text:'タイトル',color:'blue',font:{size:15},}" 形式 148 * titlePosition = "top" [top/right/bottom/left] 149 * xlabel = "名称" 150 * legendPosition = "right" [top/right/bottom/left] 151 * legendDisplay = "true" [true/false] 152 * xsclaeCallback = "function(value){return value + ' 様';}" 153 * xscaleType = "linear" 154 * xmax = "1000000" 155 * xmin = "100000" 156 * xstepSize = "10000" 157 * barWidthPer = "0.4" 158 * > 159 * <og:jsChartDataV3 ... /> 160 * </og:jsChartV3> 161 * 162 * @og.rev 8.0.0.0 (2021/08/31) Ver3対応 大幅見直し 163 * @og.group 画面表示 164 * 165 * @version 8.0 166 * @author Kazuhiko Hasegawa 167 * @since JDK11.0 168 */ 169public class JsChartV3Tag extends CommonTagSupport { 170 //* このプログラムのVERSION文字列を設定します。{@value} */ 171 private static final String VERSION = "8.0.0.0 (2021/09/30)" ; 172 private static final long serialVersionUID = 800020210930L ; 173 174 private static final String IE_CHECK 175 = "<script>{" 176 + "let userAgent = window.navigator.userAgent.toLowerCase();" + CR 177 + "if(userAgent.indexOf('msie') != -1 ||" + CR 178 + " userAgent.indexOf('trident') != -1 ) {" + CR 179 + " document.write('Internet Explorer では表示できません<br />');" + CR 180 + "}}</script>" + CR ; 181 182 /** chartType 引数に渡す事の出来る タイプ 折れ線 {@value} */ 183 public static final String CTYPE_LINE = "line"; 184 /** chartType 引数に渡す事の出来る タイプ 棒線 {@value} */ 185 public static final String CTYPE_BAR = "bar"; 186// /** chartType 引数に渡す事の出来る タイプ 横棒線 {@value} */ 187// public static final String CTYPE_HBAR = "horizontalBar"; 188 /** chartType 引数に渡す事の出来る タイプ レイダー {@value} */ 189 public static final String CTYPE_RADAR = "radar"; 190 /** chartType 引数に渡す事の出来る タイプ ポーラエリア {@value} */ 191 public static final String CTYPE_POLAR = "polarArea"; 192 /** chartType 引数に渡す事の出来る タイプ 円 {@value} */ 193 public static final String CTYPE_PIE = "pie"; 194 /** chartType 引数に渡す事の出来る タイプ ドーナツ {@value} */ 195 public static final String CTYPE_DOUGHNUT = "doughnut"; 196 /** chartType 引数に渡す事の出来る タイプ バブル {@value} 8.0.0.0 (2021/08/20) 追加 */ 197 public static final String CTYPE_BUBBLE = "bubble"; 198 /** chartType 引数に渡す事の出来る タイプ 散乱図 {@value} 8.0.0.0 (2021/08/20) 追加 */ 199 public static final String CTYPE_SCATTER = "scatter"; 200 201 /** chartType 引数に渡す事の出来る タイプ リスト {@value} */ 202 private static final Set<String> CTYPE_SET 203 = new ArraySet<>( CTYPE_LINE,CTYPE_BAR,CTYPE_RADAR,CTYPE_POLAR, 204 CTYPE_PIE,CTYPE_DOUGHNUT,CTYPE_BUBBLE,CTYPE_SCATTER ); 205 206 // 6.9.9.4 (2018/10/01) String配列から、Set に変更 207 /** chartType が円形のリスト */ 208 private static final Set<String> SET_CI_TYPE = new ArraySet<>( CTYPE_RADAR, CTYPE_POLAR, CTYPE_PIE, CTYPE_DOUGHNUT ); 209 210 private static final String TYPE_CATEGORY = "category"; 211 private static final String TYPE_LINEAR = "linear"; 212 private static final String TYPE_TIME = "time"; 213 private static final String TYPE_REALTIME = "realtime"; // 7.0.1.2 (2018/11/04) 214 215 private static final Set<String> SET_POSITION = new ArraySet<>("top","right","bottom","left"); 216 private static final Set<String> SET_TIMEUNIT = new ArraySet<>("year","quarter","month","week","day","hour","minute","second","millisecond"); // 8.0.0.0 (2021/08/31) 217 private static final Set<String> SET_XSCALE = new ArraySet<>( TYPE_CATEGORY, TYPE_TIME, TYPE_LINEAR, TYPE_REALTIME ); 218 private static final Set<String> SET_BOOLEAN = new ArraySet<>( "true", "false" ); 219 220 private static final String CANVAS_NAME = "hybscanvas"; 221 222 private static final String MARK_DEF_ADJUST = "-6"; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインの位置調整の初期値 223 224 // 7.0.1.3 (2018/11/12) バッファキー検索処理追加 225 // 8.0.0.0 (2021/08/31) Moment.js の依存関係が切れ、openGionV8では、date-fns を使用します。 226 private static final String TIME_FORMAT_JA = "{year:'yyyy年',quarter:'yyyy年M月',month:'yyyy年M月',week:'M月d日',day:'M月d日',hour:'d日 h時',minute:'h時m分',second:'m分s秒'}" ; 227 private static final String TIME_FORMAT = "{year:'yyyy',quarter:'yyyy/M',month:'yyyy/M',week:'M/d',day:'M/d',hour:'d HH',minute:'HH:mm',second:'HH:mm:ss'}" ; 228 229 // 7.0.1.3 (2018/11/12) true/false なので、記号化します。 230 private static final boolean USE_QUOTE = false; 231 private static final boolean NO_QUOTE = true; // IS_NUMBER か、!USE_QUOTE か、 232 233 // JSON形式をそれなりに成形するためのタブと改行 234 private static final String[] CR_TAB = new String[10] ; 235 static { 236 final StringBuilder tabs = new StringBuilder().append( CR ); 237 for( int i=0; i<CR_TAB.length; i++ ) { 238 CR_TAB[i] = tabs.toString(); 239 tabs.append( '\t' ); 240 } 241 } 242 243 private static final String WHEEL_ZOOM = "zoom:{zoom:{mode:'xy',wheel:{enabled:true,},pinch:{enabled:true,},},pan:{mode:'xy',enabled:true,},}," ; 244 private static final String DRAG_ZOOM = "zoom:{zoom:{drag:{enabled:true,borderColor:'rgb(54,162,235)',borderWidth:1,backgroundColor:'rgba(54,162,235,0.3)',},},pan:{mode:'xy',enabled:true,modifierKey:'ctrl',},},"; 245 246 // 変数宣言 247 // 6.9.8.0 (2018/05/28) FindBugs:直列化可能クラスの非 transient で非直列化可能なインスタンスフィールド 248 private final transient List<JsChartDataV3> jsChartData = new ArrayList<JsChartDataV3>() ; // 6.7.5.0 (2017/03/10) jsChartDataのリスト 249 250 private transient JsChartDataV3 jsXAxis = new JsChartDataV3(); // xAxes の設定用(datasetは使いません) 251 252 private String chartBody ; // チャートタグのBODY部分に書かれた文字列 253 254 private String chartType ; // チャートタイプ(必須) 255 private String labelColumn ; // ラベルカラム(必須) 256 private String indexAxis ; // horizontalBarや、verticalLine を実現 8.0.0.0 (2021/08/31) 257 private String id ; // canvasタグのid 258 private String height = "400px"; // canvasタグのheight 259 private String width = "400px"; // canvasタグのwidth 260 private String title ; // タイトル 261 private String titlePosition = "top"; // タイトル位置 262 private String legendPosition ; // 凡例位置 263 private String legendDisplay ; // 凡例表示フラグ 264 private boolean usePointStyle ; // 6.8.5.0 (2018/01/09) 点のスタイル属性を使用するかどうか(初期値:false) 265 private boolean useLegend ; // Legend関連属性(legendPosition,legendDisplay,usePointStyle) のどれかがセットされれば、true 266 private String barWidthPer = "0.8"; // 棒線の横幅(パーセント) 267 private String animation ; // 簡易的なアニメーションのON/OFF 268 private String onClick ; // クリックイベント 269 private String plugins ; // 6.9.9.2 (2018/09/18) プラグイン定義された関数を指定します。 270 private String xscaleType = TYPE_CATEGORY ; // x軸のスケールタイプ 271 private String xposition ; // x軸の表示位置[top/right/bottom/left] // 7.0.1.2 (2018/11/04) 272 private boolean valueQuot ; // 値の前後にクオートをはさむかどうか[true/false]指定します。 273 private String tableId = HybsSystem.TBL_MDL_KEY; // テーブルid 274 private String markValues ; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインの設定値をCSV形式で複数指定します 275 private String markColors ; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインの色をCSV形式で複数指定します 276 private String markLbls ; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインのラベルをCSV形式で複数指定します(未指定時はラベルを表示しません) 277 private String markAdjust ; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインのラベル表示位置の上下方向を調整します(初期値:-6)。 278 private String xmarkLbls ; // 8.0.0.0 (2021/09/30) x軸に横マーカーラインのラベルをCSV形式で複数指定 279 private String xmarkValues ; // 7.0.1.1 (2018/10/22) x軸に縦マーカーラインの設定値をCSV形式で複数指定します 280 private String xmarkColors ; // 7.0.1.1 (2018/10/22) x軸に縦マーカーラインの色をCSV形式で複数指定します 281 private String markWidth = "2"; // 7.0.1.1 (2018/10/22) マーカーライン共通のラインの幅を指定します:borderWidth(初期値:2) 282 private String markDash ; // 7.0.1.1 (2018/10/22) マーカーライン共通のラインに点線を指定([5,2]など)します:borderDash(初期値:null) 283 private String markFontSize = "10"; // 7.0.1.1 (2018/10/22) マーカーライン共通のラベルのフォントサイズを指定します:fontSize(初期値:10) 284 private boolean useZoom ; // 6.8.5.0 (2018/01/09) ズーム処理を使用するかどうか(初期値:false) 285 private boolean useDragZoom ; // 6.8.5.0 (2018/01/09) ズーム処理を使用するかどうか(初期値:false) 286 private String varColumns ; // 7.0.1.2 (2018/11/04) TableModelの指定のカラムをconstの配列変数として出力します。 287// / * useVarCheck 【TAG】const定義するJavaScript変数に使用できるかどうか[true/false]指定します 288// private boolean useVarCheck ; // 8.0.0.0 (2021/09/30) JavaScript変数に使用できるかどうか[true/false]指定します 289 private boolean useZeroDataOmit ; // 6.7.7.0 (2017/03/31) データが0の場合、使用しない(除外する)かどうか 290 private boolean useRenderer ; // 6.7.9.0 (2017/04/28) useRenderer 追加 291 private String sortColumn ; // 6.8.0.0 (2017/06/02) 検索結果をこのカラムでソートしなおします(初期値:null)。 292// private String optChart ; // 7.0.1.2 (2018/11/04) chartの属性に、TLDで未定義の属性を追加指定します。 293 private String optOptions ; // 7.0.1.2 (2018/11/04) optionsの属性に、その他オプションを追加指定します。 294 private String optPlugins ; // 8.0.0.0 (2021/09/30) options:pluginsの属性に、その他オプションを追加します 295 private String optTooltip ; // 8.0.0.0 (2021/09/30) options:plugins:tooltip の属性に、その他オプションを追加します 296 private String optLegend ; // 8.0.0.0 (2021/09/30) options:plugins:legend の属性に、その他オプションを追加します 297 298// private List<String> options = new ArrayList<>() ; // 8.0.0.0 (2021/08/31) optionsの属性に、オプションを追加設定します。 299 300 /** 301 * デフォルトコンストラクター 302 * 303 * @og.rev 6.9.7.0 (2018/05/14) PMD Each class should declare at least one constructor 304 */ 305 public JsChartV3Tag() { super(); } // これも、自動的に呼ばれるが、空のメソッドを作成すると警告されるので、明示的にしておきます。 306 307 /** 308 * タグリブオブジェクトをリリースします。 309 * キャッシュされて再利用されるので、フィールドの初期設定を行います。 310 * 311 * @og.rev 6.7.5.0 (2017/03/10) jsChartData属性の初期化もれ 312 * @og.rev 5.9.19.0 (2017/04/07) T.OTA 61200-170316-02 チャートサイズ・max・minの動的変更対応 313 * @og.rev 6.7.7.0 (2017/03/31) useZeroDataOmit属性の追加 314 * @og.rev 6.7.9.0 (2017/04/28) useRenderer 追加 315 * @og.rev 6.8.0.0 (2017/06/02) sortColumn 追加 316 * @og.rev 6.8.3.0 (2017/11/27) useEqValOmit属性の追加 317 * @og.rev 6.8.5.0 (2018/01/09) xbeginAtZero,ybeginAtZero,markValues,markColors,markLbls,markAdjust,rangeMin,rangeMax,usePointStyle属性の追加 318 * @og.rev 6.9.9.2 (2018/09/18) plugins,chartAttributes属性の追加 319 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 320 * @og.rev 6.9.9.4 (2018/10/01) リニア対応,time 属性復活 321 * @og.rev 6.9.9.4 (2018/10/01) 7.0.1.0 (2018/10/15) time 属性修正、tooltipFormat属性の追加 322 * @og.rev 7.0.1.1 (2018/10/22) xmarkValues,xmarkColors属性の追加 323 * @og.rev 7.0.1.1 (2018/10/22) ylabelColor,y2label,y2labelColor属性の追加 324 * @og.rev 7.0.1.2 (2018/11/04) ylabelColor,y2label,y2labelColor属性の追加 325 * @og.rev 8.0.0.0 (2021/08/31) horizontalBar 廃止 → indexAxis="y" 指定 326 */ 327 @Override 328 protected void release2() { 329 super.release2(); 330 jsChartData.clear(); // 6.7.5.0 (2017/03/10) 331 jsXAxis = new JsChartDataV3(); // xAxes の設定用(datasetは使いません) 332 333 chartBody = null; // 7.0.1.1 (2018/10/22) チャートタグのBODY部分に書かれた文字列 334 chartType = null; 335 id = null; 336 height = "400px"; 337 width = "400px"; 338 labelColumn = null; 339 indexAxis = null; // 8.0.0.0 (2021/08/31) 340 title = null; 341 titlePosition = "top"; 342 legendPosition = null; 343 legendDisplay = null; 344 usePointStyle = false; // 6.8.5.0 (2018/01/09) 点のスタイル属性を使用するかどうか 345 useLegend = false; // 7.0.1.1 (2018/10/22) Legend関連属性(legendPosition,legendDisplay,usePointStyle) のどれかがセットされれば、true 346 barWidthPer = "0.8"; 347 animation = null; // 8.0.0.0 (2021/08/31) 簡易的なアニメーションのON/OFF 348 onClick = null; 349 plugins = null; // 6.9.9.2 (2018/09/18) プラグイン定義された関数を指定します。 350 xscaleType = TYPE_CATEGORY; 351 xposition = null; // 7.0.1.2 (2018/11/04) x軸の表示位置[top/right/bottom/left] 352 valueQuot = false; // 7.0.1.1 (2018/10/22) 値の前後にクオートをはさむかどうか[true/false]指定します。 353 tableId = HybsSystem.TBL_MDL_KEY; 354 markValues = null; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインの設定値をCSV形式で複数指定します 355 markColors = null; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインの色をCSV形式で複数指定します 356 markLbls = null; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインのラベルをCSV形式で複数指定します(未指定時はラベルを表示しません) 357 markAdjust = null; // 6.8.5.0 (2018/01/09) y軸に横マーカーラインのラベル表示位置の上下方向を調整します(初期値:-6)。 358 xmarkLbls = null; // 8.0.0.0 (2021/09/30) x軸に横マーカーラインのラベルをCSV形式で複数指定 359 xmarkValues = null; // 7.0.1.1 (2018/10/22) x軸に縦マーカーラインの設定値をCSV形式で複数指定します 360 xmarkColors = null; // 7.0.1.1 (2018/10/22) x軸に縦マーカーラインの色をCSV形式で複数指定します 361 markWidth = "2"; // 7.0.1.1 (2018/10/22) マーカーライン共通のラインの幅を指定します:borderWidth(初期値:2) 362 markDash = null; // 7.0.1.1 (2018/10/22) マーカーライン共通のラインに点線を指定([5,2]など)します:borderDash(初期値:null) 363 markFontSize = "10"; // 7.0.1.1 (2018/10/22) マーカーライン共通のラベルのフォントサイズを指定します:fontSize(初期値:10) 364 useZoom = false; // 6.8.5.0 (2018/01/09) ズーム処理を使用するかどうか(初期値:false) 365 useDragZoom = false; // 6.8.5.0 (2018/01/09) ズーム処理を使用するかどうか(初期値:false) 366 varColumns = null; // 7.0.1.2 (2018/11/04) TableModelの指定のカラムをconstの配列変数として出力します。 367// useVarCheck = false; // 8.0.0.0 (2021/09/30) JavaScript変数に使用できるかどうか[true/false]指定します 368 useZeroDataOmit = false; // 6.7.7.0 (2017/03/31) データが0の場合、使用しない(除外する)かどうか 369 useRenderer = false; // 6.7.9.0 (2017/04/28) useRenderer 追加 370 sortColumn = null; // 6.8.0.0 (2017/06/02) 検索結果をこのカラムでソートしなおします(初期値:null)。 371// optChart = null; // 7.0.1.2 (2018/11/04) chartの属性に、TLDで未定義の属性を追加指定します。 372 optOptions = null; // 7.0.1.2 (2018/11/04) optionsの属性に、その他オプションを追加指定します。 373 optPlugins = null; // 8.0.0.0 (2021/09/30) options:pluginsの属性に、その他オプションを追加します 374 optTooltip = null; // 8.0.0.0 (2021/09/30) options:plugins:tooltip の属性に、その他オプションを追加します 375 optLegend = null; // 8.0.0.0 (2021/09/30) options:plugins:legend の属性に、その他オプションを追加します 376 } 377 378 /** 379 * Taglibの開始タグが見つかった時に処理する doStartTag() を オーバーライドします。 380 * 381 * @og.rev 6.7.5.0 (2017/03/10) タグの使用を決める共通属性の追加 382 * 383 * @return 後続処理の指示 384 */ 385 @Override 386 public int doStartTag() { 387 if( !useTag() ) { return SKIP_BODY ; } // 6.7.5.0 (2017/03/10) 388 389 return EVAL_BODY_BUFFERED; // Bodyを評価する 390 } 391 392 /** 393 * Taglibのタグ本体を処理する doAfterBody() を オーバーライドします。 394 * 395 * @og.rev 7.0.1.1 (2018/10/22) このスクリプトの中に入れたい文字があれば、登録できるようにします。 396 * 397 * @return 後続処理の指示(SKIP_BODY) 398 */ 399 @Override 400 public int doAfterBody() { 401 chartBody = getBodyString(); 402 403 if( chartBody != null ) { 404 chartBody = chartBody.trim(); 405 } 406 407 return SKIP_BODY ; 408 } 409 410 /** 411 * Taglibの終了タグが見つかったときに処理する doEndTag() を オーバーライドします。 412 * 413 * @og.rev 6.7.5.0 (2017/03/10) タグの使用を決める共通属性の追加 414 * @og.rev 6.9.9.4 (2018/10/01) idの振り方、データの持ち方変更 415 * @og.rev 8.0.0.0 (2021/08/31) エラーメッセージを画面に返します。 416 * 417 * @return 後続処理の指示 418 */ 419 @Override 420 public int doEndTag() { 421 debugPrint(); 422 if( !useTag() ) { return EVAL_PAGE ; } // 6.7.5.0 (2017/03/10) 423 424 id = (id==null ? tableId : id ); // 6.9.9.4 (2018/10/01) id指定なしの場合はtableId 425 426 // jsChart出力 427 jspPrint( jsChartOutput() ); 428 429 // 8.0.0.0 (2021/08/31) エラーメッセージを画面に表示する。 430 final StringBuilder errBuf = new StringBuilder( BUFFER_MIDDLE ); 431 final String axisErr = jsXAxis.getErrorMessage(); 432 if( !axisErr.isEmpty() ) { 433 errBuf.append( "X軸の設定でエラーがあります" ).append( CR ) 434 .append( axisErr ).append( CR ); 435 } 436 437 // jsChartDataタグの変数宣言 438 for( int i=0; i<jsChartData.size(); i++ ) { 439 final String dataErr = jsChartData.get(i).getErrorMessage(); 440 if( !dataErr.isEmpty() ) { 441 errBuf.append( "Y軸[" ).append( i ) .append( "]の設定でエラーがあります" ).append( CR ) 442 .append( dataErr ).append( CR ); 443 } 444 } 445 446 if( errBuf.length() > 0 ) { // 一応、設定されているかどうか確認する。 447 errBuf.insert( 0,"<pre>" ).append( "</pre>" ); 448 jspPrint( errBuf.toString() ); 449 } 450 451 return EVAL_PAGE; 452 } 453 454 /** 455 * jsChart出力用 456 * jsChartTag と jsChartData を使用して、jsChart情報を出力します。 457 * 458 * @og.rev 5.9.19.0 (2017/04/07) T.OTA 61200-170316-02 チャートサイズ・max・minの動的変更対応 459 * @og.rev 6.7.7.0 (2017/03/31) チャートデータで、ゼロ、null カラムを非表示にします。 460 * @og.rev 6.7.9.0 (2017/04/28) useRenderer 追加 461 * @og.rev 6.8.0.0 (2017/06/02) sortColumn 追加 462 * @og.rev 6.8.3.0 (2017/11/27) useZeroDataOmit属性で、nullOmit属性もセットします。 463 * @og.rev 6.8.3.0 (2017/11/27) useEqValOmit属性の追加 464 * @og.rev 6.8.3.1 (2017/12/01) 不要なデータを出力しないようにします。 465 * @og.rev 5.9.27.0 2017/12/01 T.OTA 61200-170831-04 max,minの小数点対応 466 * @og.rev 6.8.5.0 (2018/01/09) xbeginAtZero,ybeginAtZero,markValues,markColors,markLbls,markAdjust,rangeMin,rangeMax,usePointStyle属性の追加 467 * @og.rev 6.9.9.2 (2018/09/18) chart.jsが2.4.0から2.7.2にバージョンアップにより、廃止された属性対応 468 * @og.rev 6.9.9.2 (2018/09/18) plugins,chartAttributes属性の追加 469 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 470 * @og.rev 6.9.9.4 (2018/10/01) リニア対応,time 属性復活 471 * @og.rev 6.9.9.4 (2018/10/01) idの振り方、データの持ち方変更 472 * @og.rev 7.0.1.1 (2018/10/22) xmarkValues,xmarkColors属性の追加 473 * @og.rev 7.0.1.3 (2018/11/12) バッファキー検索処理追加、markColors,xmarkColors属性に、VIVID,PASTELカラー指定に対応します。 474 * @og.rev 8.0.0.0 (2021/08/31) BUBBLEとSCATTERの追加 475 * @og.rev 8.0.0.0 (2021/08/31) horizontalBar 廃止 → indexAxis="y" 指定 476 * 477 * @return jsChert用文字列 478 */ 479 private String jsChartOutput() { 480// // 各JavaScriptの変数名 481// final String cd = "cd_" + id; //chartData 482// final String myChart = "chart_"+id; 483 484 // JSON形式でテーブル情報を取得 485 // テーブル情報の取得 486 // 6.8.0.0 (2017/06/02) sortColumn 追加 487 DBTableModel table = (DBTableModel)getObject( tableId ) ; 488 if( StringUtil.isNotNull( sortColumn ) ) { // 6.8.5.0 (2018/01/09) 489 final int clmNo = table.getColumnNo( sortColumn ); // エラーを出す。 490 491 final DBTableModelSorter temp = new DBTableModelSorter(); 492 temp.setModel( (DBTableModel)getObject( tableId ) ); 493 temp.sortByColumn( clmNo,true ); // 順方向のソート 494 table = temp; 495 } 496 497 final int rowCount = table.getRowCount(); // 6.9.2.0 (2018/03/05) 498 499 // 7.0.1.3 (2018/11/12) DBTableModelに存在しないカラムのChartDataは無視します。 500 // これは、動的にグラフを生成する場合に、カラムの増減に合わせて、JsChartDataV3Tagを生成しなおすのが手間だからです。 501 final Iterator<JsChartDataV3> itr = jsChartData.iterator(); // 個々のグラフ 502 while( itr.hasNext() ) { 503 final JsChartDataV3 jcData = itr.next(); 504 final String chtClm = jcData.getChartColumn(); 505 final int clmNo = table.getColumnNo( chtClm ); // エラーを出す。 506 507 if( clmNo < 0 ) { 508 itr.remove(); // 7.0.1.3 (2018/11/12) カラムがDBTableModelに存在しない。 509 } 510 else if( useZeroDataOmit ) { // ゼロデータを使用しない設定 511 // 6.8.3.1 (2017/12/01) ループ処理の判定は、ChartColumn のみでよい。 512 boolean isRemove = true; 513 for( int row=0; row<rowCount; row++ ) { 514 final String val = table.getValue( row,clmNo ); 515 if( StringUtil.isNotNull( val ) && !"0".equals( val ) && !"0.0".equals( val ) && !"0.00".equals( val ) ) { // 6.8.5.0 (2018/01/09) 516 isRemove = false; 517 break; // 判定処理打ち切り 518 } 519 } 520 521 if( isRemove ) { 522 itr.remove(); // すべてが、ゼロ、null カラムを、削除します。 523 } 524 } 525 } 526 527 // 6.8.3.1 (2017/12/01) 不要なデータを出力しないようにします。 528 final int clmSize = jsChartData.size(); // JsChartV3Tag の 値部分のみの配列 529 530 final String[] clmNms = new String[clmSize]; // 6.9.9.4 (2018/10/01) カラム名の配列 531 final int[] clmNos = new int[clmSize]; 532 final int lblNos = table.getColumnNo( labelColumn ); // エラーを出す 533 final DBColumn dbClm = table.getDBColumn( lblNos ); // 6.9.2.0 (2018/03/05) 534 535 // jsChartDataタグの変数宣言 536 for( int j=0; j<clmSize; j++ ) { 537 final String chtClm = jsChartData.get(j).getChartColumn(); 538// clmNms[j] = chtClm; // 6.9.9.4 (2018/10/01) カラム名の配列 8.0.0.0 (2021/09/30) Delete 539 clmNos[j] = table.getColumnNo( chtClm ); // エラーを出す 540 541 final String clmRnm = "CLM" + j; // 8.0.0.0 (2021/09/30) JavaScript変数名対応 542 jsChartData.get(j).setChartColumn(clmRnm); 543 clmNms[j] = clmRnm; 544 } 545 546 // 8.0.0.0 (2021/08/31) chartJs V3 以降は、timeもrealtimeも表示するようになった…らしい 547 final StringBuilder rtn = new StringBuilder( BUFFER_MIDDLE ) 548 .append( IE_CHECK ) // IE 警告 549 .append( "<canvas class=\"" ).append( CANVAS_NAME ) // canvasタグの設定 550 .append( "\" id=\"" ).append( id ) 551 .append( "\" width=\"" ).append( width ) 552 .append( "\" height=\"" ).append( height ) 553 .append( "\"><!-- --></canvas>" ).append( CR ) 554 .append( "<script>{" ).append( CR ) // 8.0.0.0 (2021/08/31) スコープ限定の '{' を追加 555 .append( chartBody ); // 7.0.1.1 (2018/10/22) BODY部分の文字列の組み込み 556 557 final boolean isXcateType = TYPE_CATEGORY.equals( xscaleType ); // 6.9.9.4 (2018/10/01) 558 final boolean isXlinerType = TYPE_LINEAR.equals( xscaleType ); // 6.8.5.0 (2018/01/09) xscaleType が linear かどうか。 559 final boolean isXtimeType = TYPE_TIME.equals( xscaleType ); // 6.8.5.0 (2018/01/09) xscaleType が time かどうか。 560 561 // 7.0.1.3 (2018/11/12) const 変数に設定する配列情報を、bufに追加します。 562 final DBTableModel fcTable = table; // ラムダ式で使えるのは、final宣言された変数のみ。根本は、Sorterを組み込んでfinalすべき。 563 final IntFunction<String> lcFunc = (row) -> { 564 final String lval = fcTable.getValue( row,lblNos ); 565 return useRenderer && !isXlinerType 566 ? StringUtil.jsonFilter( dbClm.getRendererValue(row,lval) ) : lval ; 567 }; 568 setVarArray( rtn,labelColumn,rowCount,isXcateType || isXtimeType || useRenderer,lcFunc ); 569 570 // 6.9.9.4 (2018/10/01) データ部の出力 571 for( int j=0; j<clmSize; j++ ) { 572 final int clmNo = clmNos[j]; // finalしか参照できないため。 573 setVarArray( rtn,clmNms[j],rowCount,valueQuot,(row) -> fcTable.getValue( row,clmNo ) ); 574 } 575 576 // x軸がlinearスケールの場合 577 // [{x:値1,y:値2},{x:値1,y:値2},・・・] 形式のデータが必要 578 if( isXlinerType ) { 579 for( int j=0; j<clmSize; j++ ) { 580 final String chtClm = clmNms[j]; 581 rtn.append( "const LI_" ).append( chtClm ).append( "=[];" ).append( CR ); 582 583 // 6.9.9.4 (2018/10/01) x軸がlinearスケールの場合、カラム名が、変わるので、再設定している。(超特殊処理) 584 jsChartData.get(j).setChartColumn( "LI_" + chtClm ); 585 } 586 587 rtn.append( "for(var i=0; i<").append( labelColumn ).append( ".length; i++){" ); 588 for( int j=0; j<clmSize; j++ ) { 589 final String chtClm = clmNms[j]; 590 // {x:ラベル, y:値}の形式で値を設定 591 rtn.append( "LI_" ).append( chtClm ).append( "[i]={x:" ).append( labelColumn ) 592 .append( "[i],y:" ).append( chtClm ).append( "[i]};" ); 593 } 594 rtn.append( "};" ).append( CR ); 595 } 596 597 // 7.0.1.2 (2018/11/04) varColumns 追加 598 final String[] varClms = StringUtil.csv2Array( varColumns ); // 独自に出力しておきたいカラム列の値 599 for( int j=0; j<varClms.length; j++ ) { 600 final int varNos = table.getColumnNo( varClms[j] ); // エラーを出す 601 final boolean isNumType = table.getDBColumn( varNos ).isNumberType(); // 6.4.6.0 (2016/05/27) 602 603 setVarArray( rtn,varClms[j],rowCount,!isNumType,(row) -> fcTable.getValue( row,varNos ) ); 604 } 605 606 // 8.0.0.0 (2021/08/31) BUBBLEとSCATTERの追加 607 // chartType が BUBBLE の場合、chtClmが x:、varColumns の最初が、y: 次が r: になる。 608 // SCATTERの場合は、r: がないだけ。 609 if( CTYPE_BUBBLE.equals( chartType ) || CTYPE_SCATTER.equals( chartType ) ) { 610 if( CTYPE_BUBBLE.equals( chartType ) && varClms.length < 2 || 611 CTYPE_SCATTER.equals( chartType ) && varClms.length < 1 ) { 612 final StringBuilder errMsg = new StringBuilder( BUFFER_MIDDLE ) 613 .append( "chartTypeが、" ).append( chartType ) 614 .append( "の場合は、varColumns で、y: データ、r:データを指定してください。" ); 615 throw new HybsSystemException( errMsg.toString() ); 616 } 617 618 final String chtClm = clmNms[0]; // chartDataの1個目決め打ち 619 rtn.append( "const LI_" ).append( chtClm ).append( "=[];" ).append( CR ); 620 621 // x軸が[{x: , y: , r: }…} のカラム名が変わるので、再設定している。(超特殊処理) 622 jsChartData.get(0).setChartColumn( "LI_" + chtClm ); 623 624 rtn.append( "for(var i=0; i<").append( chtClm ).append( ".length; i++){" ) 625 .append( "LI_" ).append( chtClm ).append( "[i]={x:" ).append( chtClm ) 626 .append( "[i],y:" ).append( varClms[0] ); 627 628 // 切れ切れで分かりにくいかもしれないが、BUBBLEのみ、r: を出す。 629 if( CTYPE_BUBBLE.equals( chartType ) ) { 630 rtn.append( "[i],r:" ).append( varClms[1] ); 631 } 632 633 rtn.append( "[i]};}" ).append( CR ); 634 } 635 636 // ================================================================================== 637 // 7.0.1.1 (2018/10/22) jsChartData(X軸)の設定 638 if( !SET_CI_TYPE.contains( chartType ) ) { 639 jsXAxis.setId( "x0" ); // X軸のid 640 jsXAxis.setUseTime( isXtimeType ); // x軸の時間表示を使用するかどうか 641 642 // 7.0.1.3 (2018/11/12) バッファキー検索処理追加 643 if( isXtimeType && !jsXAxis.contains( JsChartDataV3.TIME , "displayFormats" ) ) { // キーワードが無ければ追加 644 // ほんとはリソースに入れるべきでしょう。 645 if( "ja".equalsIgnoreCase( getLanguage() ) ) { // 'ja' なら日本 646 jsXAxis.addTime( "displayFormats" , TIME_FORMAT_JA , NO_QUOTE ); // 標準タイムフォーマット適用。オブジェクトなので、クオートなし 647 } 648 else { 649 jsXAxis.addTime( "displayFormats" , TIME_FORMAT , NO_QUOTE ); // 標準タイムフォーマット適用。オブジェクトなので、クオートなし 650 } 651 } 652 653 // x軸にリニアスケールを設定した場合(これは残す) 654 final String xpos = xposition != null ? xposition 655 : isXlinerType ? "bottom" 656 : null ; // horizontalBar 廃止 657 jsXAxis.addAxis( "position" , xpos , USE_QUOTE ); // 文字 658 659 rtn.append( jsXAxis.getAxis() ).append( CR ); 660 } 661 662 // ================================================================================== 663 // jsChartData(Y軸)の設定 664 665 // 各JavaScriptの変数名 666 final String cd = "cd_" + id; //chartData 667 final String myChart = "chart_"+id; 668 669 // 7.0.1.1 (2018/10/22) data:dataset と、options:scales:yAxes: を変数化して出力します。 670 for( final JsChartDataV3 chData : jsChartData ) { 671 rtn.append( chData.getDataset( 'y' ) ).append( CR ) // 横棒線の場合は、'x'が、それ以外は、'y' 672 .append( chData.getAxis() ).append( CR ); 673 } 674 675 rtn.append( "const ").append( cd ).append( "={labels:" ).append( labelColumn ).append( ",datasets:[" ); 676 for( final JsChartDataV3 chData : jsChartData ) { 677 rtn.append( chData.getDatasetKey() ).append( ',' ); 678 } 679 rtn.append( "]};" ).append( CR ) 680 // jsChartの生成(グローバル変数定義の var) 681 .append( "var " ).append( myChart ).append( "=new Chart(" ).append( id ) 682 .append( ",{" ) 683 .append( CR_TAB[1] ).append( "type:'" ).append( chartType ).append( "'," ) 684 .append( CR_TAB[1] ).append( "data:" ).append( cd ).append( ',' ); 685 686 // 6.9.9.2 (2018/09/18) plugins,chartAttributes属性の追加 687 setProp( rtn, CR_TAB[1],"plugins:[" , plugins , "]," ); 688 689 rtn.append( CR_TAB[1] ).append( "options:{responsive:false," ); // レスポンシブ OFF 690 691 // 8.0.0.0 (2021/08/31) 692 setProp( rtn, CR_TAB[2],"indexAxis:'" , indexAxis , "'," ); // "y" を指定することで、horizontalBar や verticalLine を実現 693 setProp( rtn, CR_TAB[2],"categoryPercentage:" , barWidthPer , "," ); // 棒線の横幅 694 setProp( rtn, CR_TAB[2],"animation:" , animation , "," ); // 簡易的なアニメーションのON/OFFを設定 695 696 // クリックイベントの設定 697 // clickLink 変数を使用する場合、内部でマスタデータを使用します。キーとして、渡しておく必要があります。 698 setProp( rtn, CR_TAB[2],"onClick:function(event,obj){",CR_TAB[3], onClick,CR_TAB[2],"}," ); 699 700 // 8.0.0.0 (2021/08/31) options:plugins: 701 rtn.append( CR_TAB[2] ).append( "plugins:{" ); 702 703 setProp( rtn, CR_TAB[3], optPlugins , "," ); // 8.0.0.0 (2021/09/30) 属性はマージされる 704 setProp( rtn, CR_TAB[3],"tooltip:{" , optTooltip , "}," ); // 8.0.0.0 (2021/09/30) 705 706 // タイトル属性の設定(タイトル要素も処理できるように変更)) 707 if( title != null && title.length() > 0 ) { 708 if( title.charAt(0) == '{' ) { 709 rtn.append( CR_TAB[3] ).append( "title:" ).append( title ).append( ',' ); 710 } 711 else if( title.charAt(0) == '[' ) { 712 // タイトルに配列を渡すと、改行表示する。 713 setProp( rtn, CR_TAB[3],"title:{display:true,text:",title,",position:'", titlePosition, "',}," ); 714 } 715 else { 716 // タイトルを文字列として処理する。 717 setProp( rtn, CR_TAB[3],"title:{display:true,text:'",title,"',position:'", titlePosition, "',}," ); 718 } 719 } 720 721 // 凡例属性の設定( 722 if( useLegend ) { // 7.0.1.1 (2018/10/22) 723 rtn.append( CR_TAB[3] ).append( "legend:{" ); 724 setProp( rtn, optLegend , "," ); // 8.0.0.0 (2021/09/30) 属性はマージされる 725 setProp( rtn, "display:" , legendDisplay , "," ); 726 setProp( rtn, "position:'" , legendPosition , "'," ); 727 728 // 凡例のスタイルを、pointStyle にあわせるかどうか 729 if( usePointStyle ) { // 7.0.1.1 (2018/10/22) 730 rtn.append( "labels:{usePointStyle:true}," ); 731 } 732 rtn.append( "}," ); 733 } 734 735 // 8.0.0.0 (2021/08/31) zoom は、文法も変わり、options:plugins: 以下の属性になった。 736 // 6.8.5.0 (2018/01/09) ズーム処理を使用するかどうか 737 if( useZoom ) { // useZoom を優先する。 738 rtn.append( CR_TAB[3] ).append( WHEEL_ZOOM ); 739 } 740 else if( useDragZoom ) { 741 rtn.append( CR_TAB[3] ).append( DRAG_ZOOM ); 742 } 743 744 // 8.0.0.0 (2021/08/31) annotation は、options:plugins: 以下の属性になった。 745 final String[] mkVals = StringUtil.csv2Array( markValues ); // y軸の値で、横のマーカー 746 final String[] xmkVals = StringUtil.csv2Array( xmarkValues ); // x軸の値で、縦のマーカー 747 final int vCnt = mkVals.length; 748 final int xCnt = xmkVals.length; 749 if( vCnt > 0 || xCnt > 0 ) { 750 rtn.append( CR_TAB[3] ).append( "annotation:{annotations:{" ); // 8.0.0.0 (2021/08/31) 配列からオブジェクトへ 751 752 // 従来の markValues,markColors,markLbls,markAdjust 属性対応 753 if( vCnt > 0 ) { 754 final String[] mkLbls = StringUtil.csv2Array( markLbls , ',' , vCnt ); 755 final String[] mkAjst = StringUtil.csv2Array( markAdjust , ',' , vCnt , MARK_DEF_ADJUST ); 756 final String[] mkCols = colorCsv( markColors , vCnt ); // 7.0.1.3 (2018/11/12) 757 758 // 7.0.1.1 (2018/10/22) 'y-axis-0' → 'y0Ax' これは、JsChartDataV3#getAxisKey() で取得できる値だが、決め打ち 759 for( int i=0; i<vCnt; i++ ) { 760 rtn.append( CR_TAB[4] ).append( "yline" ).append(i).append( ":{" ) // V3で、名前付きになった。 761 .append( CR_TAB[5] ).append( "type:'line'," ); 762 setProp( rtn, "borderWidth:" , markWidth , "," ); 763 setProp( rtn, "borderDash:" , markDash , "," ); 764 setProp( rtn, "borderColor:'" , mkCols[i] , "'," ); 765 setProp( rtn, CR_TAB[5],"yMin:" , mkVals[i] , "," ); // V3 → V2 で、valueから、yMin,yMax に変更 766 setProp( rtn, "yMax:" , mkVals[i] , "," ); 767 if( !mkLbls[i].isEmpty() ) { 768 rtn.append( CR_TAB[5] ).append( "label:{" ) 769 .append( CR_TAB[6] ) 770 .append( "enabled:'true',position:'start',backgroundColor:'rgba(0,0,0,0)'," ) // position:left → start に変更 771 .append( CR_TAB[6] ); 772 setProp( rtn, "content:'" , mkLbls[i] , "'," ); 773 setProp( rtn, "color:'" , mkCols[i] , "'," ); 774 setProp( rtn, "yAdjust:" , mkAjst[i] , "," ); 775 setProp( rtn, CR_TAB[6],"font:{size:" , markFontSize , "}," ); // fontSize:XX → font:{size:XX} に変更 776 rtn.append( CR_TAB[5] ).append( "}," ); // label:{ 777 } 778 rtn.append( CR_TAB[4] ).append( "}," ); // type: 779 } 780 } 781 782 // 7.0.1.1 (2018/10/22) xmarkValues,markLbls,xmarkColors属性対応 783 if( xCnt > 0 ) { 784 final String[] xmkLbls = StringUtil.csv2Array( xmarkLbls , ',' , xCnt ); // 8.0.0.0 (2021/09/30) 785 final String[] xmkCols = colorCsv( xmarkColors , xCnt ); // 7.0.1.3 (2018/11/12) 786 787 // 7.0.1.1 (2018/10/22) 'x-axis-0' → 'x0Ax' これは、JsChartDataV3#getAxisKey() で取得できる値だが、決め打ち 788 for( int i=0; i<xCnt; i++ ) { 789 rtn.append( CR_TAB[4] ).append( "xline" ).append(i).append( ":{" ) 790 .append( CR_TAB[5] ).append( "type:'line'," ); // V3で、名前付きになった。 791 setProp( rtn, "borderWidth:" , markWidth , "," ); 792 setProp( rtn, "borderDash:" , markDash , "," ); 793 setProp( rtn, "borderColor:'" , xmkCols[i] , "'," ); 794 setProp( rtn, CR_TAB[5],"xMin:'" , xmkVals[i] , "'," ); // V3 → V2 で、valueから、xMin,xMax に変更 795 setProp( rtn, "xMax:'" , xmkVals[i] , "'," ); //カテゴリで文字列のケース有り 796 if( !xmkLbls[i].isEmpty() ) { // 8.0.0.0 (2021/09/30) 797 rtn.append( CR_TAB[5] ).append( "label:{" ) 798 .append( CR_TAB[6] ) 799 .append( "enabled:'true',position:'end',backgroundColor:'white'," ) // position:left → start に変更 800 .append( CR_TAB[6] ); 801 setProp( rtn, "content:'" , xmkLbls[i] , "'," ); 802 setProp( rtn, "color:'" , xmkCols[i] , "'," ); 803 setProp( rtn, CR_TAB[6],"font:{size:" , markFontSize , "}," ); // fontSize:XX → font:{size:XX} に変更 804 rtn.append( CR_TAB[5] ).append( "}," ); // label:{ 805 } 806 rtn.append( CR_TAB[4] ).append( "}," ); // type: 807 } 808 } 809 rtn.append( CR_TAB[3] ).append( "}}," ); // annotation:{annotations:{ 810 } 811 rtn.append( CR_TAB[2] ).append( "}," ); // plugins:{ 812 813 // 6.9.9.2 (2018/09/18) chart.jsが2.4.0から2.7.2にバージョンアップにより、廃止された属性対応 814 if( !SET_CI_TYPE.contains( chartType ) ) { 815 // 円形以外の場合はscales属性に設定 816 rtn.append( CR_TAB[2] ).append( "scales:{x:" ) 817 .append( jsXAxis.getAxisKey() ).append( ',' ); 818 819 // 7.0.1.1 (2018/10/22) options:scales:yAxes: を変数化して出力しているので、その設定のみでよい。 820 // 最初の一つだけ、"y:" を付ける(何か方法があるはず)。 821 boolean isFirst = true; 822 for( final JsChartDataV3 chData : jsChartData ) { 823 if( chData.isUseAxis() ) { 824 if( isFirst ) { rtn.append( "y:" ); isFirst=false; } 825 rtn.append( chData.getAxisKey() ).append( ',' ); 826 } 827 } 828 829 rtn.append( "}," ); // 7.0.1.1 (2018/10/22) 830 } 831 832 setProp( rtn, CR_TAB[2] , optOptions , "," ); // 7.0.1.2 (2018/11/04) 833 rtn.append( CR_TAB[1] ).append( "}," ) 834 .append( CR_TAB[0] ).append( "});" ).append( CR ); 835 836 // 8.0.0.0 (2021/08/31) zoom を使った場合は、ダブルクリックで元に戻す処理を入れておく 837 if( useZoom || useDragZoom ) { 838 rtn.append( "const cv_" ).append( id ).append( "=document.getElementById('" ) 839 .append( id ).append( "');" ).append( CR ) 840 .append( "cv_" ).append( id ).append( ".addEventListener( 'dblclick',function(){" ) 841 .append( myChart ) // Chart オブジェクト 842 .append( ".resetZoom();});" ).append( CR ); 843 } 844 845 rtn.append( "}</script>" ); // 8.0.0.0 (2021/08/31) スコープ限定の '}' を追加 846 847 return rtn.toString(); 848 } 849 850 /** 851 * s引数のすべての文字列が null か、長さゼロ文字列でない場合は、連結した結果を返します。 852 * 853 * @param buf ベースとなるStringBuilder 854 * @param str 連結対象の文字列群(可変長引数) 855 */ 856 private void setProp( final StringBuilder buf, final String... strs ) { 857 if( !StringUtil.isEmpty( strs ) ) { // null か、長さゼロ文字列が、一つもない場合 858 for( final String str : strs ) { 859 buf.append( str ); 860 } 861 } 862 } 863 864 /** 865 * const 変数に設定する配列情報を、bufに追加します。 866 * 867 * const 変数名が key で、cnt分の繰返しで、IntFunction を呼びます。 868 * isQuote=trueの場合は、前後にクォーテーションをつけます。 869 * 870 * @og.rev 7.0.1.3 (2018/11/12) const 変数に設定する配列情報を、bufに追加します。 871 * 872 * @param buf ベースとなるStringBuilder 873 * @param key キー 874 * @param cnt ループする個数(通常は行数:rowCount) 875 * @param isQuote クォーテーションで括るかどうか [true:括る/false:括らない] 876 * @param func 数値を引数に取る関数型インタフェース 877 */ 878 private void setVarArray( final StringBuilder buf, final String key, final int cnt, 879 final boolean isQuote, final IntFunction<String> func ) { 880 buf.append( "const " ).append( key ).append( "=[" ); 881 for( int row=0; row<cnt; row++ ) { 882 final String val = nval( func.apply( row ),"" ); // null 文字列が append されるのを避ける 883 884 if( isQuote ) { 885 buf.append( '"' ).append( val ).append( "\"," ); 886 } 887 else { 888 buf.append( val ).append( ',' ); 889 } 890 } 891 buf.append( "];" ).append( CR ); 892 } 893 894 /** 895 * パラメータチェック用メソッド。 896 * 897 * @param trg ターゲット 898 * @param set 使用可能なキーワードのSet 899 * @param trgStr ターゲットの名称 900 */ 901 private void checkPara( final String trg, final Set<String> set, final String trgStr ) { 902 if( StringUtil.isNotNull( trg ) && !check( trg, set ) ) { // 6.8.5.0 (2018/01/09) 903 final StringBuilder errMsg = new StringBuilder( BUFFER_MIDDLE ) 904 .append( "指定の" ).append( trgStr ).append( "は指定できません。" ).append( CR ) 905 .append( trgStr ).append( "=[" ).append( trg ).append( ']' ).append( CR ) 906 .append( set ); // org.opengion.fukurou.util.ArraySet の toStringメソッド 907 throw new HybsSystemException( errMsg.toString() ); 908 } 909 } 910 911// /** 912// * JavaScript変数チェック用メソッド。 913// * 914// * 1文字目は数字と、特殊記号(アンダーバー(_)、ドル記号($)を除く)、をチェックします。 915// * 厳密には、予約文字が使えなかったりするが、簡易チェックとする。 916// * 前後の空白文字は除外、それ以外の特殊記号は、アンダーバー(_)に変換します。 917// * 918// * @og.rev 8.0.0.0 (2021/09/30) JavaScriptの変数名チェックと置換 919// * 920// * @param key チェックする変数 921// * @param trgStr 変数置換後の変数 922// */ 923// private String checkPara( final String key ) { 924// if( !useVarCheck ) { return key; } // useVarCheck が false の場合は、何もしない。 925// 926// if( key == null || key.isEmpty() ) { return "_"; } 927// 928// final StringBuilder buf = new StringBuilder(key.trim()); 929// for( int i=0; i<buf.length(); i++ ) { 930// final char ch = buf.charAt(i); 931// if( i==0 && '0'<=ch && ch<='9' || 932// ' '<=ch && ch<='/' && '$'!=ch || 933// ':'<=ch && ch<='@' || 934// '['<=ch && ch<='`' && '_'!=ch || 935// '{'<=ch && ch<='~' ) { buf.setCharAt( i,'_' ); } 936// } 937// 938// return buf.toString(); 939// } 940 941 /** 942 * 色コードの配列を返すメソッドです。 943 * 944 * これは、普通のCSV形式のデータなら、そのまま分割します。 945 * 配列は、lenの数だけ作成します。 946 * nullやゼロ文字列の場合は、ColorMapのOLOR_KEYすべてを対象にします。 947 * 1色の場合も、すべて同じ色をlen の数だけセットします。 948 * 949 * VIVIDとPASTEL はキーワードで、org.opengion.fukurou.util.ColorMap のビビッドカラーと 950 * パステルカラーの配列を指定したことと同じになります。 951 * また、色番号として、ビビッドを、(V0~V11) , パステルを、(P0~P11) 952 * に割当てていますので、配列に分解後一旦すべてのキーワードを色番号検索に使用します。 953 * 954 * @og.rev 7.0.1.3 (2018/11/12) 色コードの配列を返すメソッド追加 955 * 956 * @param colCsv 色コードのCSV形式文字列 957 * @param len 作成する配列の個数 958 * @return 色コードに変換後の配列 959 */ 960 private String[] colorCsv( final String colCsv, final int len ) { 961 // 色の数を、len にあわせる必要があります。 962 final String[] mkCols = new String[len]; 963 964 // cols を元に、ColorMap から色配列を取得します。 965 final String[] cols = ColorMap.getColorKeys( colCsv ); 966 967 // 色配列に順番に割り当てますが、色が足りない場合は、初期値の色をセットします。 968 final int min = Math.min( mkCols.length , cols.length ); 969 for( int i=0; i<min; i++ ) { 970 mkCols[i] = cols[i]; 971 } 972 for( int i=min; i<mkCols.length; i++ ) { 973 mkCols[i] = cols[0]; // 色コードの最初の色 974 } 975 976 return mkCols ; 977 } 978 979 /** 980 * jsChartData情報をリストに追加します。 981 * 982 * @og.rev 6.7.5.0 (2017/03/10) リストの初期化方法を変更します。 983 * 984 * @param jsData jsChartData情報 985 */ 986 protected void addJsChartData( final JsChartDataV3 jsData ) { 987 jsChartData.add( jsData ); 988 } 989 990 /** 991 * 登録済みのjsChartData情報の個数を返します。 992 * 993 * @og.rev 6.7.7.0 (2017/03/31) 新規登録 994 * 995 * @return 登録済みのjsChartData情報の個数 996 */ 997 protected int getJsChartDataSize() { 998 return jsChartData.size(); 999 } 1000 1001 /** 1002 * borderColorとbackgroundColorに色を1色しか使用できないかどうかを返します。 1003 * 1004 * chartType に応じて、色配列が使用できないタイプがあります。 1005 * line/radar が true (1色しか使用できない) 1006 * それ以外(bar/horizontalBar/polarArea/pie/doughnut)が false (色配列が使用できる) 1007 * 1008 * @og.rev 7.0.1.1 (2018/10/22) 新規登録 1009 * 1010 * @return 登録済みのjsChartData情報の個数 1011 */ 1012 protected boolean isOneColor() { 1013 // line/radar が true (1色しか使用できない) 1014 return CTYPE_LINE.equalsIgnoreCase( chartType ) || CTYPE_RADAR.equalsIgnoreCase( chartType ); 1015 } 1016 1017 // ================================================================================= 1018 1019 /** 1020 * 【TAG】チャートの種類を指定します[line/bar/radar/polarArea/pie/doughnut/bubble/scatter](必須)。 1021 * 1022 * @og.tag 1023 * コンフィグ属性の type 定義です。 1024 * なお、複合グラフ時には、この値を、"bar" にしておかないと、きちんと表示しないようです。 1025 * 1026 * 8.0.0.0 (2021/08/31) 1027 * chartTypeが、bubbleとscatterの場合は、y:データ、r:データを varColumns で 1028 * 指定します。詳細は、varColumns の説明をご確認ください。 1029 * 1030 * horizontalBar 廃止 → indexAxis="y" 指定 (当面は互換性の関係で残しますが、廃止予定です) 1031 * verticalLine 相当の表示も indexAxis="y" 指定 1032 * 1033 * @og.rev 8.0.0.0 (2021/08/31) BUBBLEとSCATTERの追加 1034 * 1035 * @param cType チャートタイプ [line/bar/radar/polarArea/pie/doughnut/bubble/scatter] 1036 */ 1037 public void setChartType( final String cType ) { 1038 chartType = nval( getRequestParameter( cType ) , null ); 1039 1040 // 8.0.0.0 (2021/08/31) 互換性の関係で、少し残す。 1041 if( "horizontalBar".equalsIgnoreCase( chartType ) ) { 1042 indexAxis = "y"; 1043 chartType = CTYPE_BAR ; 1044 final String errMsg = "chartTypeのhorizontalBarは廃止されました。代わりに、indexAxis='y'を指定してください。" ; 1045 System.err.println( errMsg ); 1046 return ; 1047 } 1048 1049 if( !check( chartType, CTYPE_SET ) ) { 1050 final StringBuilder errMsg = new StringBuilder( BUFFER_MIDDLE ) 1051 .append( "指定のチャートタイプは実行できません。" ).append( CR ) 1052 .append( "chartType=[" ).append( chartType ).append( ']' ).append( CR ) 1053 .append( CTYPE_SET ); // org.opengion.fukurou.util.ArraySet の toStringメソッド 1054 throw new HybsSystemException( errMsg.toString() ); 1055 } 1056 } 1057 1058 /** 1059 * 【TAG】ラベルのカラム名を指定します(表示名称)(必須)。 1060 * 1061 * @og.tag 1062 * 表示名称に使用するデータベースの検索時のカラムを指定します。 1063 * 1064 * @param lblclm ラベルカラム 1065 */ 1066 public void setLabelColumn( final String lblclm ) { 1067 labelColumn = nval( getRequestParameter( lblclm ),labelColumn ); 1068 } 1069 1070 /** 1071 * 【TAG】canvasタグのidを指定します(初期値:hybscanvas)。 1072 * 1073 * @og.tag 1074 * canvasタグのidに設定します。 1075 * 1076 * @param id canvasタグのid 1077 */ 1078 @Override 1079 public void setId( final String id ) { 1080 this.id = nval( getRequestParameter( id ),this.id ); 1081 } 1082 1083 /** 1084 * 【TAG】チャートの高さを指定します(初期値:400px)。 1085 * 1086 * @og.tag 1087 * canvasタグの高さに設定します。 1088 * 1089 * @param hei 設定する高さ 1090 */ 1091 public void setHeight( final String hei ) { 1092 height = nval( getRequestParameter( hei ),height ); 1093 } 1094 1095 /** 1096 * 【TAG】チャートの幅を指定します(初期値:400px)。 1097 * 1098 * @og.tag 1099 * canvasタグの横幅を設定します。 1100 * 1101 * @param wid 設定する横幅 1102 */ 1103 public void setWidth( final String wid ) { 1104 width = nval( getRequestParameter( wid ),width ); 1105 } 1106 1107 /** 1108 * 【TAG】プラグイン定義された関数を指定します。 1109 * 1110 * @og.tag 1111 * コンフィグ属性の type 定義です。 1112 * 1113 * プラグインは、plugins: [pinFunc], 形式で追加されます。 1114 * この属性での指定時は、[]は、不要で、CSV形式の関数名を並べます。 1115 * 外部に、const pinFunc = { afterDatasetsDraw: function(chart, options) { ・・・ } }; 1116 * 形式のプラグインを指定することで、個別に読ませることが可能です。 1117 * なお、すべてのチャートに、同一のプラグインを指定する場合は、この属性ではなく、 1118 * Chart.plugins.register({ afterDatasetsDraw: function(chart, options) { ・・・ } }); 1119 * 形式で、プラグイン登録 1120 * 1121 * ※ options:plugins: 属性とは異なります。 1122 * 1123 * @og.rev 6.9.9.2 (2018/09/18) プラグイン定義された関数を指定します。 1124 * 1125 * @param attri 追加属性の値 1126 */ 1127 public void setPlugins( final String attri ) { 1128 plugins = nval( getRequestParameter( attri ),plugins ); 1129 } 1130 1131 // ================================================================================= 1132 1133 /** 1134 * 【TAG】"y" を指定することで、horizontalBar や verticalLine を実現する。 1135 * 1136 * @og.tag 1137 * options: 以下の属性 1138 * horizontalBar が廃止され、同様の機能は、indexAxis="y" 指定で実現できます。 1139 * verticalLine 相当の表示も indexAxis="y" 指定で実現します。 1140 * 1141 * @og.rev 8.0.0.0 (2021/08/31) horizontalBar 廃止 → indexAxis="y" 指定 1142 * 1143 * @param indx 軸の方向('x','y') 1144 */ 1145 public void setIndexAxis( final String indx ) { 1146 indexAxis = nval( getRequestParameter( indx ),null ); 1147 } 1148 1149 /** 1150 * 【TAG】棒線の横幅を指定します(初期値:0.8, typeがbarの場合に有効)。 1151 * 1152 * @og.tag 1153 * options: 以下の属性 1154 * options:xAxes:categoryPercentage → option:categoryPercentage の 要素の属性です。 1155 * 1156 * ※ 階層変更による対応のため、chartType による属性の出力制御は廃止しました。 1157 * 1158 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1159 * 1160 * @param widthPer 棒線の横幅 1161 */ 1162 public void setBarWidthPer( final String widthPer ) { 1163 barWidthPer = nval( getRequestParameter( widthPer ),barWidthPer ); 1164 } 1165 1166 /** 1167 * 【TAG】簡易的にアニメーションのON/OFFを設定(true/false)します(初期値::null=true)(options:animation)。 1168 * 1169 * @og.tag 1170 * options: 以下の属性 1171 * options:animation の 要素の属性です。 1172 * 1173 * ※ 簡易的に、false を指定すると、アニメーションが OFF になります。 1174 * 各種属性が登録できるように、文字列を自由に登録できます。 1175 * 1176 * @og.rev 8.0.0.0 (2021/08/31) optionAttributesで設定していた項目を属性追加 1177 * 1178 * @param flag アニメーションのON/OFFを設定(true/false) 1179 */ 1180 public void setAnimation( final String flag ) { 1181 animation = nval( getRequestParameter( flag ), animation ); 1182 } 1183 1184 /** 1185 * 【TAG】チャートクリック時のイベントを指定します。 1186 * 1187 * @og.tag 1188 * options: 以下の属性 1189 * 下記の値が引数として渡されます。 1190 * " onClick:function(event,obj){" + onClick + '}' 1191 * に変換されてセットされます。 1192 * event:イベント情報 1193 * obj:クリックされたオブジェクトの情報 1194 * 1195 * 例) 1196 * onClick="clickLink( event,obj,'result_sample2.jsp?command=RENEW&CLM={CLM}&VAL={VAL}&IDX={IDX}' );" 1197 * onClick="updatechart(obj,'SubChart');" 1198 * onClick="clickLink( event, obj,'index.jsp?chartTitle={LBL}&markValues={CLM}' , parent );" 1199 * 1200 * 基本的には、外部関数を呼び出す設定を行い、実際の動作は外部関数側で行います。 1201 * 1202 * @param click チャートクリック時のイベントを指定 1203 */ 1204 public void setOnClick( final String click ) { 1205 onClick = nval( getRequestParameter( click ),null ); 1206 } 1207 1208 // ================================================================================= 1209 1210 /** 1211 * 【TAG】タイトル、またはタイトル要素を指定します。 1212 * 1213 * @og.tag 1214 * options:title:text → options:plugins:title:text の 要素の属性です。 1215 * "タイトル" または "{display:true,text:'タイトル',color:'blue',font:{size:15},}" 形式で指定します。 1216 * options:plugins:titleの属性に、その他オプションを追加するのと同じ動きになります。 1217 * 判定方法は、先頭に 『{』が存在するかどうかです。 1218 * タイトルに配列を渡すと、改行表示します。 1219 * ['タイトル','改行','するのか?'] の形式なので、先頭に 『[』が存在するか判定します。 1220 * 1221 * <pre> 1222 * display:true/false, 初期値:false 1223 * text :チャートタイトル(string |,string[]) 1224 * color :タイトルの色 1225 * font :{ family:フォント,size:サイズ,style:スタイル,weight:太さ,lineHeight:1行の高さ } 1226 * padding:パディング 1227 * align :表示位置。'start'(開始側), 'center'(中央), 'end'(終了側)のいずれか。デフォルトは 'center' 1228 * position:表示位置。'top'(上部), 'left'(左側), 'bottom'(下部), 'right'(右側)のいずれか。デフォルトは 'top' 1229 * fullSize:フルサイズで表示するか否か。デフォルトは true 1230 * 1231 * </pre> 1232 * 1233 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1234 * @og.rev 8.0.0.0 (2021/09/30) タイトル要素も指定できるように変更 1235 * 1236 * @param title タイトル 1237 */ 1238 public void setTitle( final String title ) { 1239 this.title = nval( getRequestParameter( title ),this.title ); 1240 } 1241 1242 /** 1243 * 【TAG】タイトルの表示位置[top/right/bottom/left]を指定します(初期値:top)。 1244 * 1245 * @og.tag 1246 * options:title:position → options:plugins:title:position の 要素の属性です。 1247 * title 属性に、タイトル要素({…}書式)を設定した場合は、positionは無効です。 1248 * 1249 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#title">とほほ → チャートタイトル </a> 1250 * 1251 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1252 * 1253 * @param position タイトルの表示位置 [top/right/bottom/left] 1254 */ 1255 public void setTitlePosition( final String position ) { 1256 titlePosition = nval( getRequestParameter( position ),titlePosition ); 1257 1258 checkPara( titlePosition, SET_POSITION, "titlePosition" ); 1259 } 1260 1261 /** 1262 * 【TAG】凡例を表示するか[true/false]を指定します。 1263 * 1264 * @og.tag 1265 * options:legend:display → options:plugins:legend:display の 要素の属性です。 1266 * 1267 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1268 * 1269 * @param display 凡例を表示するか [true/false] 1270 */ 1271 public void setLegendDisplay( final String display ) { 1272 legendDisplay = nval( getRequestParameter( display ),legendDisplay ); 1273 1274 if( legendDisplay != null ) { 1275 checkPara( legendDisplay, SET_BOOLEAN, "legendDisplay" ); 1276 useLegend = true; 1277 } 1278 } 1279 1280 /** 1281 * 【TAG】凡例の表示位置[top/right/bottom/left]を指定します(初期値:top)。 1282 * 1283 * @og.tag 1284 * options:legend:position → options:plugins:legend:position の 要素の属性です。 1285 * 1286 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1287 * 1288 * @param position 凡例の表示位置 [top/right/bottom/left] 1289 */ 1290 public void setLegendPosition( final String position ) { 1291 legendPosition = nval( getRequestParameter( position ),legendPosition ); 1292 1293 if( legendPosition != null ) { 1294 checkPara( legendPosition, SET_POSITION, "legendPosition" ); 1295 useLegend = true; 1296 } 1297 } 1298 1299 /** 1300 * 【TAG】凡例のスタイル属性を使用するかどうか[true/false]を指定します(初期値:false)。 1301 * 1302 * @og.tag 1303 * 凡例のスタイルを、jsChartDataタグのpointStyle属性で指定した形状に変更します。 1304 * 複数データの場合、片方だけ指定したい場合は、usePointStyle="true" にしておき、 1305 * 指定したいほうだけ、jsChartDataタグ側で、pointStyle属性を設定してください。 1306 * <del>options:legend:labels属性のusePointStyle です。</del> 1307 * options:legend:labels:usePointStyle → options:plugins:legend:labels:usePointStyle の 要素の属性です。 1308 * 1309 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1310 * 1311 * @param usePstyle 凡例のスタイル属性を使用するかどうか [true:使用する/false:使用しない] 1312 */ 1313 public void setUsePointStyle( final String usePstyle ) { 1314 final String useStyle = nval( getRequestParameter( usePstyle ),null ); 1315 1316 if( useStyle != null ) { 1317 usePointStyle = Boolean.parseBoolean( useStyle ); 1318 useLegend = true; // パラメータの設定が行われた場合のみ、設定します。 1319 } 1320 } 1321 1322 //======================================================================================== 1323 1324 /** 1325 * 【TAG】x軸のスケールタイプ[category/linear/time]を指定します(初期値:category)。 1326 * 1327 * @og.tag 1328 * 8.0.0.0 (2021/08/31) 1329 * chartTypeが、bubbleとscatterの場合は、xscaleType は、初期値:category に 1330 * しておいてください。内部で、x: y: r: 等のデータの割り当てを行います。 1331 * options:scales:xAxes:type → options:scales:x:type の 要素の属性です。 1332 * 1333 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1334 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1335 * 1336 * @param xscaleType x軸のスケールタイプ [category/linear/time] 1337 */ 1338 public void setXscaleType( final String xscaleType ) { 1339 this.xscaleType = nval( getRequestParameter( xscaleType ) , this.xscaleType ); 1340 1341 // プラグインなどで独自の type を指定することがあるため、警告だけにします。 1342 try { 1343 checkPara( this.xscaleType, SET_XSCALE, "xscaleType" ); 1344 } 1345 catch( final HybsSystemException ex ) { 1346 System.err.println( ex.getMessage() ); 1347 } 1348 1349 jsXAxis.addAxis( "type" , this.xscaleType , USE_QUOTE ); // 文字 1350 } 1351 1352 /** 1353 * 【TAG】x軸の表示位置[top/right/bottom/left]を指定します(初期値:bottom)。 1354 * 1355 * @og.tag 1356 * <del>horizontalBar を指定した場合は、left になります。</del> 1357 * 8.0.0.0 (2021/08/31) horizontalBar は廃止 1358 * 初期値(null)は、下(bottom)に表示されます。 1359 * <del>options:scales:xAxes の 要素の属性です。</del> 1360 * options:scales:xAxes:position → options:scales:x:position の 要素の属性です。 1361 * 1362 * @og.rev 7.0.1.2 (2018/11/04) 新規登録 1363 * 1364 * @param pos x軸の表示位置 [top/right/bottom/left] 1365 */ 1366 public void setXposition( final String pos ) { 1367 xposition = nval( getRequestParameter( pos ),null ); 1368 1369 checkPara( xposition, SET_POSITION, "position" ); 1370 } 1371 1372 /** 1373 * 【TAG】x軸の最大値を指定します(xscaleTypeがlinearの場合に有効)。 1374 * 1375 * @og.tag 1376 * options:scales:xAxes:ticks:max → options:scales:x:max の 要素の属性です。 1377 * 1378 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1379 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1380 * 1381 * @param xmax x軸の最大値 1382 */ 1383 public void setXmax( final String xmax ) { 1384 jsXAxis.addAxis( "max" , nval( getRequestParameter( xmax ),null ) , NO_QUOTE ); // 数値 1385 } 1386 1387 /** 1388 * 【TAG】x軸の最小値を指定します(xscaleTypeがlinearの場合に有効)。 1389 * 1390 * @og.tag 1391 * options:scales:xAxes:ticks:min → options:scales:x:min の 要素の属性です。 1392 * 1393 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1394 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1395 * 1396 * @param xmin x軸の最小値 1397 */ 1398 public void setXmin( final String xmin ) { 1399 jsXAxis.addAxis( "min" , nval( getRequestParameter( xmin ),null ) , NO_QUOTE ); // 数値 1400 } 1401 1402 /** 1403 * 【TAG】x軸のラベルを指定します。 1404 * 1405 * @og.tag 1406 * options:scales:xAxes:scaleLabel:labelString → options:scales:x:title:text の 要素の属性です。 1407 * 1408 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1409 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1410 * 1411 * @param xlabel x軸のラベル 1412 */ 1413 public void setXlabel( final String xlabel ) { 1414 final String lbl = nval( getRequestParameter( xlabel ),null ); 1415 if( lbl != null ) { 1416 final String scLbl = "display:true,text:'" + lbl + "'" ; // ラストの ',' は、addAxis 側で付ける。 1417 jsXAxis.addAxis( JsChartDataV3.TITLE , scLbl ); 1418 } 1419 } 1420 1421 /** 1422 * 【TAG】x軸コールバックを指定します。 1423 * 1424 * @og.tag 1425 * x軸のメモリ編集用スケールバックを設定します。 1426 * options:scales:xAxes:ticks:callback → options:scales:x:ticks:callback の 要素の属性です。 1427 * callback:function(value,index,[tick objects]) { 1428 * return '$' + value; 1429 * } 1430 * 1431 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1432 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1433 * 1434 * @param callback x軸コールバック 1435 */ 1436 public void setXscaleCallback( final String callback ) { 1437 jsXAxis.addTicks( "callback" , nval( getRequestParameter( callback ),null ) , NO_QUOTE ); // ファンクションは、クオートしない 1438 } 1439 1440 /** 1441 * 【TAG】x軸を0から書き始まるかどうか(xscaleTypeがlinearの場合に有効)(初期値:null)。 1442 * 1443 * @og.tag 1444 * options:scales:xAxes:ticks:beginAtZero → options:scales:x:beginAtZero の 要素の属性です。 1445 * 1446 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1447 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1448 * 1449 * @param xZero x軸のゼロ開始 1450 */ 1451 public void setXbeginAtZero( final String xZero ) { 1452 final String beginAtZero = nval( getRequestParameter( xZero ),null ); 1453 checkPara( beginAtZero, SET_BOOLEAN, "xbeginAtZero" ); 1454 jsXAxis.addAxis( "beginAtZero" , beginAtZero , NO_QUOTE ); // 数値(boolean) 1455 } 1456 1457 /** 1458 * 【TAG】x軸のメモリ幅を指定します(xscaleTypeがlinearの場合に有効)。 1459 * 1460 * @og.tag 1461 * options:scales:xAxes:ticks:stepSize → options:scales:x:ticks:stepSize の 要素の属性です。 1462 * 1463 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1464 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1465 * 1466 * @param xstepSize x軸のメモリ幅 1467 */ 1468 public void setXstepSize( final String xstepSize ) { 1469 jsXAxis.addTicks( "stepSize" , nval( getRequestParameter( xstepSize ),null ) , NO_QUOTE ); // 数値 1470 } 1471 1472 /** 1473 * 【TAG】optionsの属性に、その他オプションを追加します。 1474 * 1475 * @og.tag 1476 * optionsの属性に、その他オプションを追加します。 1477 * 指定する際の、前後の『{}』は、不要です。 1478 * 1479 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#options">とほほ → オプション </a> 1480 * 1481 * @og.rev 7.0.1.2 (2018/11/04) 属性名変更 1482 * 1483 * @param attri オプションの値 1484 */ 1485 public void setOptOptions( final String attri ) { 1486 optOptions = nval( getRequestParameter( attri ),null ); 1487 } 1488 1489 /** 1490 * 【TAG】options:pluginsの要素に、その他オプションを追加します。 1491 * 1492 * @og.tag 1493 * options:pluginsの要素に、その他オプションを追加します 1494 * 指定する際の、前後の『{}』は、不要です。 1495 * plugins には、legend(凡例),title(タイトル),tooltip(ツールチップ),decimation(間引き),filler(塗りつぶし) 1496 * の属性を指定できるが、元々のこれらを単独で設定できる属性も持っており、 1497 * データ的にはマージされますが、同じキーを指定した場合にどのような動きになるかは保証できません。 1498 * 1499 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#plugins">とほほ → プラグイン </a> 1500 * 1501 * @og.rev 8.0.0.0 (2021/09/30) 新規追加 1502 * 1503 * @param attri plugins要素 1504 */ 1505 public void setOptPlugins( final String attri ) { 1506 optPlugins = nval( getRequestParameter( attri ),null ); 1507 } 1508 1509 /** 1510 * 【TAG】options:plugins:tooltipの要素に、その他オプションを追加します。 1511 * 1512 * @og.tag 1513 * options:plugins:tooltipの属性に、その他オプションを追加します 1514 * 指定する際の、前後の『{}』は、不要です。 1515 * tooltip には、多数の要素が設定可能なので、外部で定義したオブジェクトを 1516 * 指定するのが良いと思います。 1517 * 1518 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#tooltip">とほほ → ツールチップ </a> 1519 * 1520 * @og.rev 8.0.0.0 (2021/09/30) 新規追加 1521 * 1522 * @param attri tooltip要素 1523 */ 1524 public void setOptTooltip( final String attri ) { 1525 optTooltip = nval( getRequestParameter( attri ),null ); 1526 } 1527 1528 /** 1529 * 【TAG】options:plugins:legendの要素に、その他オプションを追加します。 1530 * 1531 * @og.tag 1532 * options:plugins:legendの属性に、その他オプションを追加します 1533 * 指定する際の、前後の『{}』は、不要です。 1534 * legend には、多数の要素が設定可能なので、外部で定義したオブジェクトを 1535 * 指定するのが良いと思います。 1536 * 1537 * legend 関係の属性として、legendDisplay、legendPosition、usePointStyle を定義しています。 1538 * optLegend属性を設定した場合、これらの属性とマージされるため、同じキーワードが存在した場合の 1539 * 動作は、不明です。 1540 * 1541 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#legend">とほほ → 凡例(レジェンド) </a> 1542 * 1543 * @og.rev 8.0.0.0 (2021/09/30) 新規追加 1544 * 1545 * @param attri legend要素 1546 */ 1547 public void setOptLegend( final String attri ) { 1548 optLegend = nval( getRequestParameter( attri ),null ); 1549 if( optLegend != null ) { 1550 useLegend = true; 1551 } 1552 } 1553 1554 /** 1555 * 【TAG】その他options:scales:xのオプションを追加します。 1556 * 1557 * @og.tag 1558 * <del>options:scales:xAxes の 要素の属性です。</del> 1559 * options:scales:xAxes → options:scales:x の 要素の属性です。 1560 * ※ chartJS上は、Axes(axisの複数形)と、Axis を使い分けていますが、属性は、axis で統一します。 1561 * 1562 * @og.rev 7.0.1.2 (2018/11/04) 属性の追加。 1563 * 1564 * @param attri その他options:scales:xAxesのオプション 1565 */ 1566 public void setOptAxis( final String attri ) { 1567 jsXAxis.addAxis( JsChartDataV3.AXIS , nval( getRequestParameter( attri ),null ) ); 1568 } 1569 1570 /** 1571 * 【TAG】その他options:scales:x:ticksのオプションを追加します。 1572 * 1573 * @og.tag 1574 * <del>options:scales:xAxes:ticks の 要素の属性です。</del> 1575 * options:scales:xAxes:ticks → options:scales:x:ticks の 要素の属性です。 1576 * 1577 * @og.rev 7.0.1.2 (2018/11/04) 属性の追加。 1578 * 1579 * @param attri その他options:scales:xAxes:ticksのオプション 1580 */ 1581 public void setOptTicks( final String attri ) { 1582 jsXAxis.addAxis( JsChartDataV3.TICKS , nval( getRequestParameter( attri ),null ) ); 1583 } 1584 1585 /** 1586 * 【TAG】その他options:scales:x:titleのオプションを追加します。 1587 * 1588 * @og.tag 1589 * <del>options:scales:xAxes:scaleLabel の 要素の属性です。</del> 1590 * options:scales:xAxes:scaleLabel → options:scales:x:title の 要素の属性です。 1591 * 1592 * @og.rev 7.0.1.2 (2018/11/04) 属性の追加。 1593 * 1594 * @param title options:scales:x:title要素 1595 */ 1596 public void setOptTitle( final String title ) { 1597 jsXAxis.addAxis( JsChartDataV3.TITLE , nval( getRequestParameter( title ),null ) ); 1598 } 1599 1600 /** 1601 * 【TAG】その他options:scales:x:gridのオプションを追加します。 1602 * 1603 * @og.tag 1604 * <del>options:scales:xAxes:gridLines の 要素の属性です。</del> 1605 * options:scales:xAxes:gridLines → options:scales:x:grid の 要素の属性です。 1606 * 1607 * @og.rev 7.0.1.2 (2018/11/04) 属性の追加。 1608 * 1609 * @param grid options:scales:x:gridの属性 1610 */ 1611 public void setOptGrid( final String grid ) { 1612 jsXAxis.addAxis( JsChartDataV3.GRID , nval( getRequestParameter( grid ),null ) ); 1613 } 1614 1615 /** 1616 * 【TAG】x軸のタイムの単位[year/quarter/month/week/day/hour/minute/second/millisecond]を指定します。 1617 * 1618 * @og.tag 1619 * (xscaleTypeがtimeの場合に有効。指定しない場合は自動) 1620 * options:scales:x:unit 1621 * 1622 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 1623 * @og.rev 6.9.9.4 (2018/10/01) nvalを入れて、属性復活。 1624 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1625 * 1626 * @param tunit x軸のタイムの単位 [year/quarter/month/week/day/hour/minute/second/millisecond] 1627 */ 1628 public void setTimeUnit( final String tunit ) { 1629 final String timeUnit = nval( getRequestParameter( tunit ),null ); 1630 1631 checkPara( timeUnit, SET_TIMEUNIT, "timeUnit" ); 1632 1633 jsXAxis.addTime( "unit" , timeUnit , USE_QUOTE ); // 文字列 1634 } 1635 1636 /** 1637 * 【TAG】x軸のタイムの単位幅を指定します(xscaleTypeがtimeの場合に有効)。 1638 * 1639 * @og.tag 1640 * options:scales:x:time:unitStepSize → options:scales:x:time:stepSize の 要素の属性です。 1641 * 1642 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 1643 * @og.rev 6.9.9.4 (2018/10/01) nvalを入れて、属性復活。 1644 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1645 * 1646 * @param tunitStepSize x軸のタイムの単位幅 1647 */ 1648 public void setTimeUnitStepSize( final String tunitStepSize ) { 1649 jsXAxis.addTime( "stepSize" , nval( getRequestParameter( tunitStepSize ),null ) , NO_QUOTE ); // 数値 1650 } 1651 1652 /** 1653 * 【TAG】x軸の設定するタイム(入力データ)のフォーマットを指定します(xscaleTypeがtimeの場合に有効)。 1654 * 1655 * @og.tag 1656 * フォーマットは、chartjs-adapter-date-fns.bundle.min.js の定義を使用します。 1657 * <a href="https://github.com/chartjs/chartjs-adapter-date-fns">chartjs-adapter-date-fns</a> 1658 * <a href="https://zenn.dev/snjssk/articles/f05d1bcfeb9604#format">date-fns format</a> 1659 * 例:yyyyMMddHHmmss 1660 * 1661 * 8.0.0.0 (2021/08/31) 1662 * 代わりに、options:scales:x:time.parser で指定します。 1663 * 1664 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 1665 * @og.rev 6.9.9.4 (2018/10/01) nvalを入れて、属性復活。 1666 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1667 * @og.rev 8.0.0.0 (2021/08/31) timeSetFormat → timeParser 変更 1668 * 1669 * @param tFormat x軸の設定するタイムのフォーマット処理 1670 */ 1671 public void setTimeParser( final String tFormat ) { 1672 jsXAxis.addTime( "parser" , nval( getRequestParameter( tFormat ),null ) , USE_QUOTE ); // 文字列 1673 } 1674 1675 /** 1676 * 【TAG】x軸の表示するタイムのフォーマットを指定します(xscaleTypeがtimeの場合に有効)。 1677 * 1678 * @og.tag 1679 * 8.0.0.0 (2021/08/31) 1680 * Moment.js の依存関係が切れ、openGionV8では、date-fns を使用します。 1681 * <a href="https://date-fns.org/v2.23.0/docs/format">date-fns format</a> 1682 * ※ yyyy が、YYYY になっているが、よく分からない。 1683 * 1684 * 基本形:yyyyMMddHHmmss 1685 * options:scales:x:time:displayFormats 1686 * 1687 * <table class="plain"> 1688 * <caption>タイムのフォーマット(抜粋)</caption> 1689 * <tr><th>Pattern </th><th>Result examples </th><th>Unit </th></tr> 1690 * <tr><td>yyyy </td><td>0044, 0001, 1900, 2017 </td><td>Calendar year </td></tr> 1691 * <tr><td>M </td><td>1, 2, ..., 12 </td><td>Month (formatting) </td></tr> 1692 * <tr><td>MM </td><td>01, 02, ..., 12 </td><td>Month (formatting) </td></tr> 1693 * <tr><td>MMM </td><td>Jan, Feb, ..., Dec </td><td>Month (formatting) </td></tr> 1694 * <tr><td>MMMM </td><td>January, February, ..., December </td><td>Month (formatting) </td></tr> 1695 * <tr><td>d </td><td>1, 2, ..., 31 </td><td>Day of month </td></tr> 1696 * <tr><td>dd </td><td>01, 02, ..., 31 </td><td>Day of month </td></tr> 1697 * <tr><td>H </td><td>0, 1, 2, ..., 23 </td><td>Hour [0-23] </td></tr> 1698 * <tr><td>HH </td><td>00, 01, 02, ..., 23 </td><td> </td></tr> 1699 * <tr><td>m </td><td>0, 1, ..., 59 </td><td>Minute </td></tr> 1700 * <tr><td>mm </td><td>00, 01, ..., 59 </td><td> </td></tr> 1701 * <tr><td>s </td><td>0, 1, ..., 59 </td><td>Second </td></tr> 1702 * <tr><td>ss </td><td>00, 01, ..., 59 </td><td> </td></tr> 1703 * <tr><td>S </td><td>0, 1, ..., 9 </td><td>Fraction of second </td></tr> 1704 * <tr><td>SS </td><td>00, 01, ..., 99 </td><td> </td></tr> 1705 * <tr><td>SSS </td><td>000, 001, ..., 999 </td><td> </td></tr> 1706 * </table> 1707 * 1708 * timeLblFormatが指定されている場合、全てのdisplayFormatsにtimeLblFormatを設定する 1709 * 1710 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 1711 * @og.rev 6.9.9.4 (2018/10/01) nvalを入れて、属性復活。 1712 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1713 * 1714 * @param tLblFormat x軸の表示するタイムのフォーマット 1715 * @see #setTimeParser(String) 1716 */ 1717 public void setTimeLblFormat( final String tLblFormat ) { 1718 final String timeFmt = nval( getRequestParameter( tLblFormat ),null ); 1719 if( timeFmt != null ) { 1720 final StringBuilder buf = new StringBuilder( BUFFER_MIDDLE ) 1721 .append( "{year:'" ).append( timeFmt ) 1722 .append( "',quarter:'" ).append( timeFmt ) 1723 .append( "',month:'" ).append( timeFmt ) 1724 .append( "',week:'" ).append( timeFmt ) 1725 .append( "',day:'" ).append( timeFmt ) 1726 .append( "',hour:'" ).append( timeFmt ) 1727 .append( "',minute:'" ).append( timeFmt ) 1728 .append( "',second:'" ).append( timeFmt ) 1729 .append( "'}" ); 1730 1731 jsXAxis.addTime( "displayFormats" , buf.toString() , NO_QUOTE ); // オブジェクトなので、クオートなし 1732 } 1733 } 1734 1735 /** 1736 * 【TAG】x軸の時間のツールチップに使用するフォーマット(タイムスケール用)を指定します(xscaleTypeがtimeの場合に有効)。 1737 * 1738 * @og.tag 1739 * 8.0.0.0 (2021/08/31) 1740 * Moment.js の依存関係が切れ、openGionV8では、date-fns を使用します。 1741 * <a href="https://date-fns.org/v2.23.0/docs/format">date-fns format</a> 1742 * 1743 * 基本形:yyyyMMddHHmmss 1744 * options:scales:x:time:tooltipFormat 1745 * 1746 * フォーマットは、timeLblFormat (内部的には、time:displayFormats)と同じ 1747 * 1748 * @og.rev 7.0.1.0 (2018/10/15) 時間のツールチップに使用するフォーマット(タイムスケール用) 1749 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1750 * 1751 * @param tipFormat x軸の表示するタイムのフォーマット 1752 * @see #setTimeParser(String) 1753 */ 1754 public void setTooltipFormat( final String tipFormat ) { 1755 jsXAxis.addTime( "tooltipFormat" , nval( getRequestParameter( tipFormat ),null ) , USE_QUOTE ); // 文字列 1756 } 1757 1758 //======================================================================================== 1759 1760 /** 1761 * 【TAG】y軸に横マーカーラインの設定値をCSV形式で複数指定します。 1762 * 1763 * @og.tag 1764 * X軸に平行に固定値の線を引きます。線の値を、CSV形式で指定します。 1765 * annotation:annotations オプションに名前付きで設定した中に yMin,yMax を定義します。 1766 * 以前は、value に値をセットしていましたが、,yMin:値,yMax:値 にセットします。 1767 * 1768 * 8.0.0.0 (2021/08/31) 1769 * chartjs-plugin-annotation を使用します。 1770 * 配列ではなく、名前付きの設定になります。(下記の例では、ymark0:) 1771 * options::plugins:annotation:annotations:ymark0:{ 1772 * type:'line', ← 固定です。 1773 * borderWidth:2, ← markWidthの値(ライン共通 初期値="2") 1774 * borderDash:[5,2], ← markDashの値(ライン共通 初期値=null) 1775 * yMin:値,yMax:値, ← markValuesの値 1776 * borderColor: '#FF0000', ← markColorsの値 1777 * label:{ 1778 * enabled:'true',position:'start', ← 固定です。 1779 * backgroundColor:'rgba(0,0,0,0)', ← 固定です。 1780 * font:{ size:10 }, ← markFontSizeの値(ライン共通 初期値=10) 1781 * content:'基準値', ← markLblsの値 1782 * yAdjust:-6, ← markAdjustの値 1783 * color:'#FF0000', ← markColorsの値 1784 * … , 1785 * }, 1786 * }, 1787 * 1788 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1789 * @og.rev 8.0.0.0 (2021/08/31) chartJs V3 で大きく変更されています。 1790 * 1791 * @param mkVals y軸に横マーカーラインの設定値(CSV形式) 1792 */ 1793 public void setMarkValues( final String mkVals ) { 1794 markValues = nval( getRequestParameter( mkVals ) , markValues ); 1795 } 1796 1797 /** 1798 * 【TAG】y軸に横マーカーラインの色をCSV形式で複数指定します。 1799 * 1800 * @og.tag 1801 * annotation:annotations オプションに名前付きで設定した中に borderColor を定義します。 1802 * 1803 * X軸に平行に固定値の線を引きます。線の色を、CSV形式で指定します。 1804 * markValues が指定されており、markColorsが指定されていない場合は、青色(BLUE)になります。 1805 * 色指定に、VIVID,PASTEL を使えるようにします。 1806 * 1807 * 詳細は、markValues の説明をご確認願います。 1808 * 1809 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1810 * @og.rev 7.0.1.3 (2018/11/12) 色指定に、VIVID,PASTEL を使えるようにします。 1811 * 1812 * @param mkCols y軸に横マーカーラインの色(CSV形式) 1813 * @see #setMarkValues(String) 1814 */ 1815 public void setMarkColors( final String mkCols ) { 1816 markColors = nval( getRequestParameter( mkCols ) , markColors ); 1817 } 1818 1819 /** 1820 * 【TAG】y軸に横マーカーラインのラベルをCSV形式で複数指定します。 1821 * 1822 * @og.tag 1823 * annotation:annotations オプションに名前付きで設定した中に 1824 * label:content を定義します。 1825 * 1826 * label 属性の enabled:'true',position:'start',backgroundColor:'rgba(0,0,0,0)', 1827 * font:{ size:10 } は固定で、color は、markColors 属性で指定した 1828 * y軸に横マーカーラインの色を使用します。 1829 * 色指定に、VIVID,PASTEL を使えるようにします。 1830 * 1831 * 詳細は、markValues の説明をご確認願います。 1832 * 1833 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1834 * 1835 * @param mklbls y軸に横マーカーラインのラベル(CSV形式) 1836 * @see #setMarkValues(String) 1837 */ 1838 public void setMarkLbls( final String mklbls ) { 1839 markLbls = nval( getRequestParameter( mklbls ) , markLbls ); 1840 } 1841 1842 /** 1843 * 【TAG】y軸に横マーカーラインのラベル表示位置の上下方向を調整します(初期値:-6)。 1844 * 1845 * @og.tag 1846 * annotation:annotations オプションに名前付きで設定した中に 1847 * label:yAdjust を定義します。 1848 * 1849 * これは、ラインに対するラベルの位置を表します。+で、下側、-で上側に表示します。 1850 * 初期値は、-6 で、ラインの上側に来るように調整しています。 1851 * 1852 * 詳細は、markValues の説明をご確認願います。 1853 * 1854 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1855 * 1856 * @param mkAjst y軸に横マーカーラインのラベル表示位置の上下方向調整 1857 * @see #setMarkValues(String) 1858 */ 1859 public void setMarkAdjust( final String mkAjst ) { 1860 markAdjust = nval( getRequestParameter( mkAjst ) , markAdjust ); 1861 } 1862 1863 /** 1864 * 【TAG】x軸に横マーカーラインのラベルをCSV形式で複数指定します。 1865 * 1866 * @og.tag 1867 * annotation:annotations オプションに名前付きで設定した中に 1868 * label:content を定義します。 1869 * 1870 * label 属性の enabled:'true',position:'end',backgroundColor:'white', 1871 * font:{ size:10 } は固定で、color は、markColors 属性で指定した 1872 * x軸に横マーカーラインの色を使用します。 1873 * 色指定に、VIVID,PASTEL を使えるようにします。 1874 * 1875 * 詳細は、xmarkValues の説明をご確認願います。 1876 * 1877 * @og.rev 8.0.0.0 (2021/09/30) 新規追加 1878 * 1879 * @param mklbls x軸に横マーカーラインのラベル(CSV形式) 1880 * @see #setMarkValues(String) 1881 */ 1882 public void setXmarkLbls( final String mklbls ) { 1883 xmarkLbls = nval( getRequestParameter( mklbls ) , xmarkLbls ); 1884 } 1885 1886 /** 1887 * 【TAG】x軸に縦マーカーラインの設定値をCSV形式で複数指定します。 1888 * 1889 * @og.tag 1890 * annotation:annotations オプションに名前付きで設定した中に xMin,xMax を定義します。 1891 * 1892 * Y軸に平行に固定値の縦線を引きます。線の値を、CSV形式で指定します。 1893 * 以前は、value に値をセットしていましたが、,xMin:値,xMax:値 にセットします。 1894 * 1895 * type:'line',borderWidth:2,scaleID:'x0Ax', 固定です。 1896 * chartjs-plugin-annotation を使用します。 1897 * 配列ではなく、名前付きの設定になります。(下記の例では、xmark0:) 1898 * 1899 * options:plugins:annotation:annotations:xmark0:{ 1900 * type:'line', ← 固定です。 1901 * borderWidth:2, ← markWidthの値(ライン共通 初期値="2") 1902 * borderDash:[5,2], ← markDashの値(ライン共通 初期値=null) 1903 * xMin:値,xMax:値, ← xmarkValuesの値 1904 * borderColor:'#FF0000', ← xmarkColorsの値 1905 * }, 1906 * 1907 * @og.rev 7.0.1.1 (2018/10/22) xmarkValues,xmarkColors属性の追加 1908 * 1909 * @param mkVals x軸に縦マーカーラインの設定値(CSV形式) 1910 * @see #setMarkValues(String) 1911 */ 1912 public void setXmarkValues( final String mkVals ) { 1913 xmarkValues = nval( getRequestParameter( mkVals ) , xmarkValues ); 1914 } 1915 1916 /** 1917 * 【TAG】x軸に縦マーカーラインの色をCSV形式で複数指定します。 1918 * 1919 * @og.tag 1920 * annotation:annotations オプションに名前付きで設定した中に borderColor を定義します。 1921 * 1922 * Y軸に平行に固定値の縦線を引きます。線の色を、CSV形式で指定します。 1923 * xmarkValues が指定されており、xmarkColorsが指定されていない場合は、青色(BLUE)になります。 1924 * 1925 * @og.rev 7.0.1.1 (2018/10/22) xmarkValues,xmarkColors属性の追加 1926 * @og.rev 7.0.1.3 (2018/11/12) 色指定に、VIVID,PASTEL を使えるようにします。 1927 * 1928 * @param mkCols x軸に縦マーカーラインの色(CSV形式) 1929 * @see #setXmarkValues(String) 1930 */ 1931 public void setXmarkColors( final String mkCols ) { 1932 xmarkColors = nval( getRequestParameter( mkCols ) , xmarkColors ); 1933 } 1934 1935 /** 1936 * 【TAG】x軸,y軸全マーカーライン共通のラインの幅を指定します:borderWidth(初期値:2)。 1937 * 1938 * @og.tag 1939 * annotation:annotations オプションに名前付きで設定した中に borderWidth を定義します。 1940 * 1941 * この値は、x軸,y軸関係なく、マーカーラインの順番も関係なく、共通設定になります。 1942 * 1943 * @og.rev 7.0.1.1 (2018/10/22) markWidth,markDash,markFontSize属性の追加 1944 * 1945 * @param width マーカーライン共通のラインの幅 1946 * @see #setMarkValues(String) 1947 */ 1948 public void setMarkWidth( final String width ) { 1949 markWidth = nval( getRequestParameter( width ) , markWidth ); 1950 } 1951 1952 /** 1953 * 【TAG】x軸,y軸全マーカーライン共通のラインに点線を指定([5,2]など)します:borderDash(初期値:null)。 1954 * 1955 * @og.tag 1956 * annotation:annotations オプションに名前付きで設定した中に borderDash を定義します。 1957 * 1958 * この値は、x軸,y軸関係なく、マーカーラインの順番も関係なく、共通設定になります。 1959 * markDash="[5,2]" とすれば、線の長さが5px , 線と線の間が2px になります。 1960 * 1961 * @og.rev 7.0.1.1 (2018/10/22) markWidth,markDash,markFontSize属性の追加 1962 * 1963 * @param dash マーカーライン共通のラインの点線の形状 1964 * @see #setMarkValues(String) 1965 */ 1966 public void setMarkDash( final String dash ) { 1967 markDash = nval( getRequestParameter( dash ) , markDash ); 1968 } 1969 1970 /** 1971 * 【TAG】x軸,y軸全マーカーライン共通のラベルのフォントサイズを指定します:label:font:size(初期値:10)。 1972 * 1973 * @og.tag 1974 * annotation:annotations オプションに名前付きで設定した中に 1975 * label:font:size を定義します。 1976 * 1977 * この値は、x軸,y軸関係なく、マーカーラインの順番も関係なく、共通設定になります。 1978 * 1979 * @og.rev 7.0.1.1 (2018/10/22) markWidth,markDash,markFontSize属性の追加 1980 * 1981 * @param size マーカーライン共通のフォントサイズ 1982 * @see #setMarkValues(String) 1983 */ 1984 public void setMarkFontSize( final String size ) { 1985 markFontSize = nval( getRequestParameter( size ) , markFontSize ); 1986 } 1987 1988 //======================================================================================== 1989 1990 /** 1991 * 【TAG】すべてのデータが0の場合、使用しないかどうか[true:除外する/false:除外しない]を指定します(初期値:false)。 1992 * 1993 * @og.tag 1994 * JSON データを作成して、JsChartV3に渡しますが、このフラグを true に設定すると 1995 * 0 または、null(空文字列)のデータを出力しません。 6.8.3.0 (2017/11/27) 1996 * グラフ系で、0 が、ありえない値として設定されている場合に、使用すると、 1997 * 出力するデータ量を抑えることが出来ます。 1998 * 1999 * @og.rev 6.7.7.0 (2017/03/31) useZeroDataOmit属性の追加 2000 * 2001 * @param useZeroOmit データが0の場合の使用可否 [true:除外する/false:除外しない] 2002 */ 2003 public void setUseZeroDataOmit( final String useZeroOmit ) { 2004 useZeroDataOmit = nval( getRequestParameter( useZeroOmit ) , useZeroDataOmit ); 2005 } 2006 2007 /** 2008 * 【TAG】JSON出力で、値出力にレンデラを利用するかどうか[true/false]を指定します(初期値:false)。 2009 * 2010 * @og.tag 2011 * JSONのデータのレンデラー変換を行うかどうか。 2012 * 数値部分にはレンデラー変換は行いません。ラベル文字に行います。 2013 * 指定しない場合は使用しない(false)です。 2014 * 2015 * @og.rev 6.7.9.0 (2017/04/28) useRenderer 追加 2016 * 2017 * @param usernd レンデラーを利用するかどうか [true/false] 2018 */ 2019 public void setUseRenderer( final String usernd ) { 2020 useRenderer = nval( getRequestParameter( usernd ) , useRenderer ); 2021 } 2022 2023 /** 2024 * 【TAG】検索結果をこのカラムでソートし直します(初期値:null)。 2025 * 2026 * @og.tag 2027 * query で検索した結果を、JsChartV3で利用する場合、チャート上のソート順と、 2028 * リストや、別のチャートでの表示準が異なる場合に、このカラムで、ソートしなおします。 2029 * 通常は、labelColumn と同じ値でソートすることで、X軸の順番に表示されます。 2030 * 2031 * @og.rev 6.8.0.0 (2017/06/02) sortColumn 追加 2032 * 2033 * @param sortClm このカラムでソートし直す 2034 */ 2035 public void setSortColumn( final String sortClm ) { 2036 sortColumn = nval( getRequestParameter( sortClm ) , sortColumn ); 2037 } 2038 2039 /** 2040 * 【TAG】値の前後にクオートをはさむかどうか[true/false]指定します(初期値:false)。 2041 * 2042 * @og.tag 2043 * 以前は、yscaleType="category" のときに、値が、文字列のため、クオートで囲う判断をしていました。 2044 * その属性は、JsChartDataV3Tag に移ったため、新たなパラメータを用意します。 2045 * 将来的に、自動判定にするか、JsChartDataV3Tag から情報を取得するかもしれません。 2046 * 2047 * @og.rev 7.0.1.1 (2018/10/22) 新規登録 2048 * 2049 * @param flag 値の前後にクオートをはさむかどうか [true/false] 2050 */ 2051 public void setValueQuot( final String flag ) { 2052 valueQuot = nval( getRequestParameter( flag ),valueQuot ); 2053 } 2054 2055 /** 2056 * 【TAG】WheelZoom処理を使用するかどうか[true/false]を指定します(初期値:false)。 2057 * 2058 * @og.tag 2059 * plugins:zoom に、zoom:{wheel,pinch} と pan を定義します。(chartJs V3 の変更点) 2060 * これは、chartjs-plugin-zoom.js を使用します。 2061 * マウスホイールで、zoom処理、右クリックで移動(pan)します。 2062 * ダブルクリックで元の状態に戻します。 2063 * useDragZoom と同時指定した場合は、useZoom が優先されます。 2064 * 2065 * 初期値は、false:使用しないです。 2066 * 2067 * <ul> 2068 * <li>zoom:{mode:'xy',wheel:{enabled:true,},pinch:{enabled:true,},},</li> 2069 * <li>pan:{mode:'xy',enabled:true,},</li> 2070 * <li>canvasをクリックでzoomリセット </li> 2071 * </ul> 2072 * 2073 * options:plugins:zoom:{ 2074 * zoom:{mode:'xy',wheel:{enabled:true,},pinch:{enabled:true,},}, 2075 * pan:{mode:'xy',enabled:true,}, 2076 * }, 2077 * 2078 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 2079 * 2080 * @param flag WheelZoom処理を使用するかどうか [true:使用する/false:使用しない]。 2081 */ 2082 public void setUseZoom( final String flag ) { 2083 useZoom = nval( getRequestParameter( flag ) , useZoom ); 2084 } 2085 2086 /** 2087 * 【TAG】DragZoom処理を使用するかどうか[true/false]を指定します(初期値:false)。 2088 * 2089 * @og.tag 2090 * plugins:zoom に zoom:{drag} と pan:{modifierKey: 'ctrl',} を定義します。(chartJs V3 の変更点) 2091 * これは、chartjs-plugin-zoom.js を使用します。 2092 * 右クリックで範囲指定で、zoom処理、CTRLボタンを押しながら、右クリックで移動(pan)します。 2093 * ダブルクリックで元の状態に戻します。 2094 * useDragZoom と同時指定した場合は、useZoom が優先されます。 2095 * 2096 * 初期値は、false:使用しないです。 2097 * 2098 * <ul> 2099 * <li>zoom:{drag:{enabled:true,borderColor:'rgb(54,162,235)',borderWidth:1,backgroundColor:'rgba(54,162,235,0.3)'},},</li> 2100 * <li>pan:{mode:'xy',enabled:true,modifierKey: 'ctrl',},</li> 2101 * <li>canvasをクリックでzoomリセット </li> 2102 * </ul> 2103 * 2104 * options:plugins:zoom:{ 2105 * zoom:{drag:{enabled:true,borderColor:'rgb(54,162,235)',borderWidth:1,backgroundColor:'rgba(54,162,235,0.3)'},}, 2106 * pan:{mode:'xy',enabled:true,modifierKey: 'ctrl',}, 2107 * }, 2108 * 2109 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 2110 * 2111 * @param flag DragZoom処理を使用するかどうか [true:使用する/false:使用しない]。 2112 */ 2113 public void setUseDragZoom( final String flag ) { 2114 useDragZoom = nval( getRequestParameter( flag ) , useDragZoom ); 2115 } 2116 2117 /** 2118 * 【TAG】TableModelの指定のカラム(CSV形式)をconstの配列変数として出力します。 2119 * 2120 * @og.tag 2121 * これは、指定のカラムのデータをJavaScriptのconst変数定義で配列として出力します。 2122 * labelColumn や、JsChartDataV3Tag の chartColumn と同じ方法です。 2123 * 2124 * 例えば、TableModelを、sortColumn でソートすると、JsChartDataV3Tag の pointBGColor 2125 * の配列順も変わりますので、ソートされた状態で出力したいことがあると思います。 2126 * 2127 * 8.0.0.0 (2021/08/31) 2128 * chartTypeが、bubble の場合、 2129 * x:は、jsChartData の chartColumn 2130 * y:は、varColumns で指定した1番目のカラム 2131 * r:は、varColumns で指定した2番目のカラム 2132 * scatter の場合は、y:の1番目のカラムのみ使用します。 2133 * 2134 * @og.rev 7.0.1.2 (2018/11/04) 新規登録 2135 * @og.rev 8.0.0.0 (2021/08/31) BUBBLEとSCATTERの追加 2136 * 2137 * @param clms 指定のカラム(CSV形式)をconstの配列変数として出力 2138 */ 2139 public void setVarColumns( final String clms ) { 2140 varColumns = nval( getRequestParameter( clms ) , varColumns ); 2141 } 2142 2143// /** 2144// * 【TAG】const定義するJavaScript変数に使用できるかどうか[true/false]指定します。 2145// * 2146// * @og.tag 2147// * const定義するJavaScript変数に使用できる文字は、決まっています。 2148// * 2149// * 1文字目は数字と、特殊記号(アンダーバー(_)、ドル記号($)を除く)、をチェックします。 2150// * 厳密には、予約文字が使えなかったりするが、簡易チェックとする。 2151// * 前後の空白文字は除外、それ以外の特殊記号は、アンダーバー(_)に変換します。 2152// * 初期値[false] 2153// * 2154// * @og.rev 8.0.0.0 (2021/09/30) 新規登録 2155// * 2156// * @param flag JavaScript変数に使用できるかどうか[true/false]指定 2157// */ 2158// public void setUseVarCheck( final String flag ) { 2159// useVarCheck = nval( getRequestParameter( flag ) , useVarCheck ); 2160// } 2161 2162 //======================================================================================== 2163 2164 /** 2165 * 【TAG】(通常は使いません)sessionから所得する DBTableModelオブジェクトの ID。 2166 * 2167 * @og.tag 2168 * 2169 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 2170 * 2171 * @param tableId テーブルID 2172 */ 2173 public void setTableId( final String tableId ) { 2174 this.tableId = nval( getRequestParameter( tableId ) , this.tableId ); 2175 } 2176 2177 /** 2178 * このオブジェクトの文字列表現を返します。 2179 * 基本的にデバッグ目的に使用します。 2180 * 2181 * @return このクラスの文字列表現 2182 */ 2183 @Override 2184 public String toString() { 2185 final StringBuilder buf = new StringBuilder( BUFFER_MIDDLE ) 2186 .append( "X_AXIS=" ).append( jsXAxis ).append( CR ); 2187 2188 jsChartData.forEach( js -> buf.append( "Y_AXIS=" ).append( jsXAxis ).append( CR ) ); 2189 2190 return ToString.title( this.getClass().getName() ) 2191 .println( "VERSION" , VERSION ) 2192 .println( "id" , id ) 2193 .println( "tableId" , tableId ) 2194 .println( "chartType" , chartType ) 2195 .println( "width" , width ) 2196 .println( "height" , height ) 2197 .println( "barWidthPer" , barWidthPer ) 2198 .println( "title" , title ) 2199 .println( "titlePosition" , titlePosition ) 2200 .println( "legendPosition" , legendPosition ) 2201 .println( "legendDisplay" , legendDisplay ) 2202 .println( "xscaleType" , xscaleType ) 2203 .println( "optOptions" , optOptions ) // 7.0.1.2 (2018/11/04) 2204// .println( "optChart" , optChart ) // 7.0.1.2 (2018/11/04) 2205 .fixForm().println() 2206 .println( buf ).toString(); 2207 } 2208}