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.2.1 (2021/12/10)" ; 172 private static final long serialVersionUID = 802120211210L ; 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 * @og.rev 8.0.2.1 (2021/12/10) 空文字列の場合は、クォーテーションを付けない。 872 * 873 * @param buf ベースとなるStringBuilder 874 * @param key キー 875 * @param cnt ループする個数(通常は行数:rowCount) 876 * @param isQuote クォーテーションで括るかどうか [true:括る/false:括らない] 877 * @param func 数値を引数に取る関数型インタフェース 878 */ 879 private void setVarArray( final StringBuilder buf, final String key, final int cnt, 880 final boolean isQuote, final IntFunction<String> func ) { 881 buf.append( "const " ).append( key ).append( "=[" ); 882 for( int row=0; row<cnt; row++ ) { 883 final String val = nval( func.apply( row ),"" ); // null 文字列が append されるのを避ける 884 885 if( val.isEmpty() ) { // 8.0.2.1 (2021/12/10) 886 buf.append( ',' ); 887 } 888 else if( isQuote ) { 889 buf.append( '"' ).append( val ).append( "\"," ); 890 } 891 else { 892 buf.append( val ).append( ',' ); 893 } 894 } 895 buf.append( "];" ).append( CR ); 896 } 897 898 /** 899 * パラメータチェック用メソッド。 900 * 901 * @param trg ターゲット 902 * @param set 使用可能なキーワードのSet 903 * @param trgStr ターゲットの名称 904 */ 905 private void checkPara( final String trg, final Set<String> set, final String trgStr ) { 906 if( StringUtil.isNotNull( trg ) && !check( trg, set ) ) { // 6.8.5.0 (2018/01/09) 907 final StringBuilder errMsg = new StringBuilder( BUFFER_MIDDLE ) 908 .append( "指定の" ).append( trgStr ).append( "は指定できません。" ).append( CR ) 909 .append( trgStr ).append( "=[" ).append( trg ).append( ']' ).append( CR ) 910 .append( set ); // org.opengion.fukurou.util.ArraySet の toStringメソッド 911 throw new HybsSystemException( errMsg.toString() ); 912 } 913 } 914 915// /** 916// * JavaScript変数チェック用メソッド。 917// * 918// * 1文字目は数字と、特殊記号(アンダーバー(_)、ドル記号($)を除く)、をチェックします。 919// * 厳密には、予約文字が使えなかったりするが、簡易チェックとする。 920// * 前後の空白文字は除外、それ以外の特殊記号は、アンダーバー(_)に変換します。 921// * 922// * @og.rev 8.0.0.0 (2021/09/30) JavaScriptの変数名チェックと置換 923// * 924// * @param key チェックする変数 925// * @param trgStr 変数置換後の変数 926// */ 927// private String checkPara( final String key ) { 928// if( !useVarCheck ) { return key; } // useVarCheck が false の場合は、何もしない。 929// 930// if( key == null || key.isEmpty() ) { return "_"; } 931// 932// final StringBuilder buf = new StringBuilder(key.trim()); 933// for( int i=0; i<buf.length(); i++ ) { 934// final char ch = buf.charAt(i); 935// if( i==0 && '0'<=ch && ch<='9' || 936// ' '<=ch && ch<='/' && '$'!=ch || 937// ':'<=ch && ch<='@' || 938// '['<=ch && ch<='`' && '_'!=ch || 939// '{'<=ch && ch<='~' ) { buf.setCharAt( i,'_' ); } 940// } 941// 942// return buf.toString(); 943// } 944 945 /** 946 * 色コードの配列を返すメソッドです。 947 * 948 * これは、普通のCSV形式のデータなら、そのまま分割します。 949 * 配列は、lenの数だけ作成します。 950 * nullやゼロ文字列の場合は、ColorMapのOLOR_KEYすべてを対象にします。 951 * 1色の場合も、すべて同じ色をlen の数だけセットします。 952 * 953 * VIVIDとPASTEL はキーワードで、org.opengion.fukurou.util.ColorMap のビビッドカラーと 954 * パステルカラーの配列を指定したことと同じになります。 955 * また、色番号として、ビビッドを、(V0~V11) , パステルを、(P0~P11) 956 * に割当てていますので、配列に分解後一旦すべてのキーワードを色番号検索に使用します。 957 * 958 * @og.rev 7.0.1.3 (2018/11/12) 色コードの配列を返すメソッド追加 959 * 960 * @param colCsv 色コードのCSV形式文字列 961 * @param len 作成する配列の個数 962 * @return 色コードに変換後の配列 963 */ 964 private String[] colorCsv( final String colCsv, final int len ) { 965 // 色の数を、len にあわせる必要があります。 966 final String[] mkCols = new String[len]; 967 968 // cols を元に、ColorMap から色配列を取得します。 969 final String[] cols = ColorMap.getColorKeys( colCsv ); 970 971 // 色配列に順番に割り当てますが、色が足りない場合は、初期値の色をセットします。 972 final int min = Math.min( mkCols.length , cols.length ); 973 for( int i=0; i<min; i++ ) { 974 mkCols[i] = cols[i]; 975 } 976 for( int i=min; i<mkCols.length; i++ ) { 977 mkCols[i] = cols[0]; // 色コードの最初の色 978 } 979 980 return mkCols ; 981 } 982 983 /** 984 * jsChartData情報をリストに追加します。 985 * 986 * @og.rev 6.7.5.0 (2017/03/10) リストの初期化方法を変更します。 987 * 988 * @param jsData jsChartData情報 989 */ 990 protected void addJsChartData( final JsChartDataV3 jsData ) { 991 jsChartData.add( jsData ); 992 } 993 994 /** 995 * 登録済みのjsChartData情報の個数を返します。 996 * 997 * @og.rev 6.7.7.0 (2017/03/31) 新規登録 998 * 999 * @return 登録済みのjsChartData情報の個数 1000 */ 1001 protected int getJsChartDataSize() { 1002 return jsChartData.size(); 1003 } 1004 1005 /** 1006 * borderColorとbackgroundColorに色を1色しか使用できないかどうかを返します。 1007 * 1008 * chartType に応じて、色配列が使用できないタイプがあります。 1009 * line/radar が true (1色しか使用できない) 1010 * それ以外(bar/horizontalBar/polarArea/pie/doughnut)が false (色配列が使用できる) 1011 * 1012 * @og.rev 7.0.1.1 (2018/10/22) 新規登録 1013 * 1014 * @return 登録済みのjsChartData情報の個数 1015 */ 1016 protected boolean isOneColor() { 1017 // line/radar が true (1色しか使用できない) 1018 return CTYPE_LINE.equalsIgnoreCase( chartType ) || CTYPE_RADAR.equalsIgnoreCase( chartType ); 1019 } 1020 1021 // ================================================================================= 1022 1023 /** 1024 * 【TAG】チャートの種類を指定します[line/bar/radar/polarArea/pie/doughnut/bubble/scatter](必須)。 1025 * 1026 * @og.tag 1027 * コンフィグ属性の type 定義です。 1028 * なお、複合グラフ時には、この値を、"bar" にしておかないと、きちんと表示しないようです。 1029 * 1030 * 8.0.0.0 (2021/08/31) 1031 * chartTypeが、bubbleとscatterの場合は、y:データ、r:データを varColumns で 1032 * 指定します。詳細は、varColumns の説明をご確認ください。 1033 * 1034 * horizontalBar 廃止 → indexAxis="y" 指定 (当面は互換性の関係で残しますが、廃止予定です) 1035 * verticalLine 相当の表示も indexAxis="y" 指定 1036 * 1037 * @og.rev 8.0.0.0 (2021/08/31) BUBBLEとSCATTERの追加 1038 * 1039 * @param cType チャートタイプ [line/bar/radar/polarArea/pie/doughnut/bubble/scatter] 1040 */ 1041 public void setChartType( final String cType ) { 1042 chartType = nval( getRequestParameter( cType ) , null ); 1043 1044 // 8.0.0.0 (2021/08/31) 互換性の関係で、少し残す。 1045 if( "horizontalBar".equalsIgnoreCase( chartType ) ) { 1046 indexAxis = "y"; 1047 chartType = CTYPE_BAR ; 1048 final String errMsg = "chartTypeのhorizontalBarは廃止されました。代わりに、indexAxis='y'を指定してください。" ; 1049 System.err.println( errMsg ); 1050 return ; 1051 } 1052 1053 if( !check( chartType, CTYPE_SET ) ) { 1054 final StringBuilder errMsg = new StringBuilder( BUFFER_MIDDLE ) 1055 .append( "指定のチャートタイプは実行できません。" ).append( CR ) 1056 .append( "chartType=[" ).append( chartType ).append( ']' ).append( CR ) 1057 .append( CTYPE_SET ); // org.opengion.fukurou.util.ArraySet の toStringメソッド 1058 throw new HybsSystemException( errMsg.toString() ); 1059 } 1060 } 1061 1062 /** 1063 * 【TAG】ラベルのカラム名を指定します(表示名称)(必須)。 1064 * 1065 * @og.tag 1066 * 表示名称に使用するデータベースの検索時のカラムを指定します。 1067 * 1068 * @param lblclm ラベルカラム 1069 */ 1070 public void setLabelColumn( final String lblclm ) { 1071 labelColumn = nval( getRequestParameter( lblclm ),labelColumn ); 1072 } 1073 1074 /** 1075 * 【TAG】canvasタグのidを指定します(初期値:hybscanvas)。 1076 * 1077 * @og.tag 1078 * canvasタグのidに設定します。 1079 * 1080 * @param id canvasタグのid 1081 */ 1082 @Override 1083 public void setId( final String id ) { 1084 this.id = nval( getRequestParameter( id ),this.id ); 1085 } 1086 1087 /** 1088 * 【TAG】チャートの高さを指定します(初期値:400px)。 1089 * 1090 * @og.tag 1091 * canvasタグの高さに設定します。 1092 * 1093 * @param hei 設定する高さ 1094 */ 1095 public void setHeight( final String hei ) { 1096 height = nval( getRequestParameter( hei ),height ); 1097 } 1098 1099 /** 1100 * 【TAG】チャートの幅を指定します(初期値:400px)。 1101 * 1102 * @og.tag 1103 * canvasタグの横幅を設定します。 1104 * 1105 * @param wid 設定する横幅 1106 */ 1107 public void setWidth( final String wid ) { 1108 width = nval( getRequestParameter( wid ),width ); 1109 } 1110 1111 /** 1112 * 【TAG】プラグイン定義された関数を指定します。 1113 * 1114 * @og.tag 1115 * コンフィグ属性の type 定義です。 1116 * 1117 * プラグインは、plugins: [pinFunc], 形式で追加されます。 1118 * この属性での指定時は、[]は、不要で、CSV形式の関数名を並べます。 1119 * 外部に、const pinFunc = { afterDatasetsDraw: function(chart, options) { ・・・ } }; 1120 * 形式のプラグインを指定することで、個別に読ませることが可能です。 1121 * なお、すべてのチャートに、同一のプラグインを指定する場合は、この属性ではなく、 1122 * Chart.plugins.register({ afterDatasetsDraw: function(chart, options) { ・・・ } }); 1123 * 形式で、プラグイン登録 1124 * 1125 * ※ options:plugins: 属性とは異なります。 1126 * 1127 * @og.rev 6.9.9.2 (2018/09/18) プラグイン定義された関数を指定します。 1128 * 1129 * @param attri 追加属性の値 1130 */ 1131 public void setPlugins( final String attri ) { 1132 plugins = nval( getRequestParameter( attri ),plugins ); 1133 } 1134 1135 // ================================================================================= 1136 1137 /** 1138 * 【TAG】"y" を指定することで、horizontalBar や verticalLine を実現する。 1139 * 1140 * @og.tag 1141 * options: 以下の属性 1142 * horizontalBar が廃止され、同様の機能は、indexAxis="y" 指定で実現できます。 1143 * verticalLine 相当の表示も indexAxis="y" 指定で実現します。 1144 * 1145 * @og.rev 8.0.0.0 (2021/08/31) horizontalBar 廃止 → indexAxis="y" 指定 1146 * 1147 * @param indx 軸の方向('x','y') 1148 */ 1149 public void setIndexAxis( final String indx ) { 1150 indexAxis = nval( getRequestParameter( indx ),null ); 1151 } 1152 1153 /** 1154 * 【TAG】棒線の横幅を指定します(初期値:0.8, typeがbarの場合に有効)。 1155 * 1156 * @og.tag 1157 * options: 以下の属性 1158 * options:xAxes:categoryPercentage → option:categoryPercentage の 要素の属性です。 1159 * 1160 * ※ 階層変更による対応のため、chartType による属性の出力制御は廃止しました。 1161 * 1162 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1163 * 1164 * @param widthPer 棒線の横幅 1165 */ 1166 public void setBarWidthPer( final String widthPer ) { 1167 barWidthPer = nval( getRequestParameter( widthPer ),barWidthPer ); 1168 } 1169 1170 /** 1171 * 【TAG】簡易的にアニメーションのON/OFFを設定(true/false)します(初期値::null=true)(options:animation)。 1172 * 1173 * @og.tag 1174 * options: 以下の属性 1175 * options:animation の 要素の属性です。 1176 * 1177 * ※ 簡易的に、false を指定すると、アニメーションが OFF になります。 1178 * 各種属性が登録できるように、文字列を自由に登録できます。 1179 * 1180 * @og.rev 8.0.0.0 (2021/08/31) optionAttributesで設定していた項目を属性追加 1181 * 1182 * @param flag アニメーションのON/OFFを設定(true/false) 1183 */ 1184 public void setAnimation( final String flag ) { 1185 animation = nval( getRequestParameter( flag ), animation ); 1186 } 1187 1188 /** 1189 * 【TAG】チャートクリック時のイベントを指定します。 1190 * 1191 * @og.tag 1192 * options: 以下の属性 1193 * 下記の値が引数として渡されます。 1194 * " onClick:function(event,obj){" + onClick + '}' 1195 * に変換されてセットされます。 1196 * event:イベント情報 1197 * obj:クリックされたオブジェクトの情報 1198 * 1199 * 例) 1200 * onClick="clickLink( event,obj,'result_sample2.jsp?command=RENEW&CLM={CLM}&VAL={VAL}&IDX={IDX}' );" 1201 * onClick="updatechart(obj,'SubChart');" 1202 * onClick="clickLink( event, obj,'index.jsp?chartTitle={LBL}&markValues={CLM}' , parent );" 1203 * 1204 * 基本的には、外部関数を呼び出す設定を行い、実際の動作は外部関数側で行います。 1205 * 1206 * @param click チャートクリック時のイベントを指定 1207 */ 1208 public void setOnClick( final String click ) { 1209 onClick = nval( getRequestParameter( click ),null ); 1210 } 1211 1212 // ================================================================================= 1213 1214 /** 1215 * 【TAG】タイトル、またはタイトル要素を指定します。 1216 * 1217 * @og.tag 1218 * options:title:text → options:plugins:title:text の 要素の属性です。 1219 * "タイトル" または "{display:true,text:'タイトル',color:'blue',font:{size:15},}" 形式で指定します。 1220 * options:plugins:titleの属性に、その他オプションを追加するのと同じ動きになります。 1221 * 判定方法は、先頭に 『{』が存在するかどうかです。 1222 * タイトルに配列を渡すと、改行表示します。 1223 * ['タイトル','改行','するのか?'] の形式なので、先頭に 『[』が存在するか判定します。 1224 * 1225 * <pre> 1226 * display:true/false, 初期値:false 1227 * text :チャートタイトル(string |,string[]) 1228 * color :タイトルの色 1229 * font :{ family:フォント,size:サイズ,style:スタイル,weight:太さ,lineHeight:1行の高さ } 1230 * padding:パディング 1231 * align :表示位置。'start'(開始側), 'center'(中央), 'end'(終了側)のいずれか。デフォルトは 'center' 1232 * position:表示位置。'top'(上部), 'left'(左側), 'bottom'(下部), 'right'(右側)のいずれか。デフォルトは 'top' 1233 * fullSize:フルサイズで表示するか否か。デフォルトは true 1234 * 1235 * </pre> 1236 * 1237 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1238 * @og.rev 8.0.0.0 (2021/09/30) タイトル要素も指定できるように変更 1239 * 1240 * @param title タイトル 1241 */ 1242 public void setTitle( final String title ) { 1243 this.title = nval( getRequestParameter( title ),this.title ); 1244 } 1245 1246 /** 1247 * 【TAG】タイトルの表示位置[top/right/bottom/left]を指定します(初期値:top)。 1248 * 1249 * @og.tag 1250 * options:title:position → options:plugins:title:position の 要素の属性です。 1251 * title 属性に、タイトル要素({…}書式)を設定した場合は、positionは無効です。 1252 * 1253 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#title">とほほ → チャートタイトル </a> 1254 * 1255 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1256 * 1257 * @param position タイトルの表示位置 [top/right/bottom/left] 1258 */ 1259 public void setTitlePosition( final String position ) { 1260 titlePosition = nval( getRequestParameter( position ),titlePosition ); 1261 1262 checkPara( titlePosition, SET_POSITION, "titlePosition" ); 1263 } 1264 1265 /** 1266 * 【TAG】凡例を表示するか[true/false]を指定します。 1267 * 1268 * @og.tag 1269 * options:legend:display → options:plugins:legend:display の 要素の属性です。 1270 * 1271 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1272 * 1273 * @param display 凡例を表示するか [true/false] 1274 */ 1275 public void setLegendDisplay( final String display ) { 1276 legendDisplay = nval( getRequestParameter( display ),legendDisplay ); 1277 1278 if( legendDisplay != null ) { 1279 checkPara( legendDisplay, SET_BOOLEAN, "legendDisplay" ); 1280 useLegend = true; 1281 } 1282 } 1283 1284 /** 1285 * 【TAG】凡例の表示位置[top/right/bottom/left]を指定します(初期値:top)。 1286 * 1287 * @og.tag 1288 * options:legend:position → options:plugins:legend:position の 要素の属性です。 1289 * 1290 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1291 * 1292 * @param position 凡例の表示位置 [top/right/bottom/left] 1293 */ 1294 public void setLegendPosition( final String position ) { 1295 legendPosition = nval( getRequestParameter( position ),legendPosition ); 1296 1297 if( legendPosition != null ) { 1298 checkPara( legendPosition, SET_POSITION, "legendPosition" ); 1299 useLegend = true; 1300 } 1301 } 1302 1303 /** 1304 * 【TAG】凡例のスタイル属性を使用するかどうか[true/false]を指定します(初期値:false)。 1305 * 1306 * @og.tag 1307 * 凡例のスタイルを、jsChartDataタグのpointStyle属性で指定した形状に変更します。 1308 * 複数データの場合、片方だけ指定したい場合は、usePointStyle="true" にしておき、 1309 * 指定したいほうだけ、jsChartDataタグ側で、pointStyle属性を設定してください。 1310 * <del>options:legend:labels属性のusePointStyle です。</del> 1311 * options:legend:labels:usePointStyle → options:plugins:legend:labels:usePointStyle の 要素の属性です。 1312 * 1313 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1314 * 1315 * @param usePstyle 凡例のスタイル属性を使用するかどうか [true:使用する/false:使用しない] 1316 */ 1317 public void setUsePointStyle( final String usePstyle ) { 1318 final String useStyle = nval( getRequestParameter( usePstyle ),null ); 1319 1320 if( useStyle != null ) { 1321 usePointStyle = Boolean.parseBoolean( useStyle ); 1322 useLegend = true; // パラメータの設定が行われた場合のみ、設定します。 1323 } 1324 } 1325 1326 //======================================================================================== 1327 1328 /** 1329 * 【TAG】x軸のスケールタイプ[category/linear/time]を指定します(初期値:category)。 1330 * 1331 * @og.tag 1332 * 8.0.0.0 (2021/08/31) 1333 * chartTypeが、bubbleとscatterの場合は、xscaleType は、初期値:category に 1334 * しておいてください。内部で、x: y: r: 等のデータの割り当てを行います。 1335 * options:scales:xAxes:type → options:scales:x:type の 要素の属性です。 1336 * 1337 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1338 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1339 * 1340 * @param xscaleType x軸のスケールタイプ [category/linear/time] 1341 */ 1342 public void setXscaleType( final String xscaleType ) { 1343 this.xscaleType = nval( getRequestParameter( xscaleType ) , this.xscaleType ); 1344 1345 // プラグインなどで独自の type を指定することがあるため、警告だけにします。 1346 try { 1347 checkPara( this.xscaleType, SET_XSCALE, "xscaleType" ); 1348 } 1349 catch( final HybsSystemException ex ) { 1350 System.err.println( ex.getMessage() ); 1351 } 1352 1353 jsXAxis.addAxis( "type" , this.xscaleType , USE_QUOTE ); // 文字 1354 } 1355 1356 /** 1357 * 【TAG】x軸の表示位置[top/right/bottom/left]を指定します(初期値:bottom)。 1358 * 1359 * @og.tag 1360 * <del>horizontalBar を指定した場合は、left になります。</del> 1361 * 8.0.0.0 (2021/08/31) horizontalBar は廃止 1362 * 初期値(null)は、下(bottom)に表示されます。 1363 * <del>options:scales:xAxes の 要素の属性です。</del> 1364 * options:scales:xAxes:position → options:scales:x:position の 要素の属性です。 1365 * 1366 * @og.rev 7.0.1.2 (2018/11/04) 新規登録 1367 * 1368 * @param pos x軸の表示位置 [top/right/bottom/left] 1369 */ 1370 public void setXposition( final String pos ) { 1371 xposition = nval( getRequestParameter( pos ),null ); 1372 1373 checkPara( xposition, SET_POSITION, "position" ); 1374 } 1375 1376 /** 1377 * 【TAG】x軸の最大値を指定します(xscaleTypeがlinearの場合に有効)。 1378 * 1379 * @og.tag 1380 * options:scales:xAxes:ticks:max → options:scales:x:max の 要素の属性です。 1381 * 1382 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1383 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1384 * 1385 * @param xmax x軸の最大値 1386 */ 1387 public void setXmax( final String xmax ) { 1388 jsXAxis.addAxis( "max" , nval( getRequestParameter( xmax ),null ) , NO_QUOTE ); // 数値 1389 } 1390 1391 /** 1392 * 【TAG】x軸の最小値を指定します(xscaleTypeがlinearの場合に有効)。 1393 * 1394 * @og.tag 1395 * options:scales:xAxes:ticks:min → options:scales:x:min の 要素の属性です。 1396 * 1397 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1398 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1399 * 1400 * @param xmin x軸の最小値 1401 */ 1402 public void setXmin( final String xmin ) { 1403 jsXAxis.addAxis( "min" , nval( getRequestParameter( xmin ),null ) , NO_QUOTE ); // 数値 1404 } 1405 1406 /** 1407 * 【TAG】x軸のラベルを指定します。 1408 * 1409 * @og.tag 1410 * options:scales:xAxes:scaleLabel:labelString → options:scales:x:title:text の 要素の属性です。 1411 * 1412 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1413 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1414 * 1415 * @param xlabel x軸のラベル 1416 */ 1417 public void setXlabel( final String xlabel ) { 1418 final String lbl = nval( getRequestParameter( xlabel ),null ); 1419 if( lbl != null ) { 1420 final String scLbl = "display:true,text:'" + lbl + "'" ; // ラストの ',' は、addAxis 側で付ける。 1421 jsXAxis.addAxis( JsChartDataV3.TITLE , scLbl ); 1422 } 1423 } 1424 1425 /** 1426 * 【TAG】x軸コールバックを指定します。 1427 * 1428 * @og.tag 1429 * x軸のメモリ編集用スケールバックを設定します。 1430 * options:scales:xAxes:ticks:callback → options:scales:x:ticks:callback の 要素の属性です。 1431 * callback:function(value,index,[tick objects]) { 1432 * return '$' + value; 1433 * } 1434 * 1435 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1436 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1437 * 1438 * @param callback x軸コールバック 1439 */ 1440 public void setXscaleCallback( final String callback ) { 1441 jsXAxis.addTicks( "callback" , nval( getRequestParameter( callback ),null ) , NO_QUOTE ); // ファンクションは、クオートしない 1442 } 1443 1444 /** 1445 * 【TAG】x軸を0から書き始まるかどうか(xscaleTypeがlinearの場合に有効)(初期値:null)。 1446 * 1447 * @og.tag 1448 * options:scales:xAxes:ticks:beginAtZero → options:scales:x:beginAtZero の 要素の属性です。 1449 * 1450 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1451 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1452 * 1453 * @param xZero x軸のゼロ開始 1454 */ 1455 public void setXbeginAtZero( final String xZero ) { 1456 final String beginAtZero = nval( getRequestParameter( xZero ),null ); 1457 checkPara( beginAtZero, SET_BOOLEAN, "xbeginAtZero" ); 1458 jsXAxis.addAxis( "beginAtZero" , beginAtZero , NO_QUOTE ); // 数値(boolean) 1459 } 1460 1461 /** 1462 * 【TAG】x軸のメモリ幅を指定します(xscaleTypeがlinearの場合に有効)。 1463 * 1464 * @og.tag 1465 * options:scales:xAxes:ticks:stepSize → options:scales:x:ticks:stepSize の 要素の属性です。 1466 * 1467 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 1468 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1469 * 1470 * @param xstepSize x軸のメモリ幅 1471 */ 1472 public void setXstepSize( final String xstepSize ) { 1473 jsXAxis.addTicks( "stepSize" , nval( getRequestParameter( xstepSize ),null ) , NO_QUOTE ); // 数値 1474 } 1475 1476 /** 1477 * 【TAG】optionsの属性に、その他オプションを追加します。 1478 * 1479 * @og.tag 1480 * optionsの属性に、その他オプションを追加します。 1481 * 指定する際の、前後の『{}』は、不要です。 1482 * 1483 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#options">とほほ → オプション </a> 1484 * 1485 * @og.rev 7.0.1.2 (2018/11/04) 属性名変更 1486 * 1487 * @param attri オプションの値 1488 */ 1489 public void setOptOptions( final String attri ) { 1490 optOptions = nval( getRequestParameter( attri ),null ); 1491 } 1492 1493 /** 1494 * 【TAG】options:pluginsの要素に、その他オプションを追加します。 1495 * 1496 * @og.tag 1497 * options:pluginsの要素に、その他オプションを追加します 1498 * 指定する際の、前後の『{}』は、不要です。 1499 * plugins には、legend(凡例),title(タイトル),tooltip(ツールチップ),decimation(間引き),filler(塗りつぶし) 1500 * の属性を指定できるが、元々のこれらを単独で設定できる属性も持っており、 1501 * データ的にはマージされますが、同じキーを指定した場合にどのような動きになるかは保証できません。 1502 * 1503 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#plugins">とほほ → プラグイン </a> 1504 * 1505 * @og.rev 8.0.0.0 (2021/09/30) 新規追加 1506 * 1507 * @param attri plugins要素 1508 */ 1509 public void setOptPlugins( final String attri ) { 1510 optPlugins = nval( getRequestParameter( attri ),null ); 1511 } 1512 1513 /** 1514 * 【TAG】options:plugins:tooltipの要素に、その他オプションを追加します。 1515 * 1516 * @og.tag 1517 * options:plugins:tooltipの属性に、その他オプションを追加します 1518 * 指定する際の、前後の『{}』は、不要です。 1519 * tooltip には、多数の要素が設定可能なので、外部で定義したオブジェクトを 1520 * 指定するのが良いと思います。 1521 * 1522 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#tooltip">とほほ → ツールチップ </a> 1523 * 1524 * @og.rev 8.0.0.0 (2021/09/30) 新規追加 1525 * 1526 * @param attri tooltip要素 1527 */ 1528 public void setOptTooltip( final String attri ) { 1529 optTooltip = nval( getRequestParameter( attri ),null ); 1530 } 1531 1532 /** 1533 * 【TAG】options:plugins:legendの要素に、その他オプションを追加します。 1534 * 1535 * @og.tag 1536 * options:plugins:legendの属性に、その他オプションを追加します 1537 * 指定する際の、前後の『{}』は、不要です。 1538 * legend には、多数の要素が設定可能なので、外部で定義したオブジェクトを 1539 * 指定するのが良いと思います。 1540 * 1541 * legend 関係の属性として、legendDisplay、legendPosition、usePointStyle を定義しています。 1542 * optLegend属性を設定した場合、これらの属性とマージされるため、同じキーワードが存在した場合の 1543 * 動作は、不明です。 1544 * 1545 * <a href="https://www.tohoho-web.com/ex/chartjs-params.html#legend">とほほ → 凡例(レジェンド) </a> 1546 * 1547 * @og.rev 8.0.0.0 (2021/09/30) 新規追加 1548 * 1549 * @param attri legend要素 1550 */ 1551 public void setOptLegend( final String attri ) { 1552 optLegend = nval( getRequestParameter( attri ),null ); 1553 if( optLegend != null ) { 1554 useLegend = true; 1555 } 1556 } 1557 1558 /** 1559 * 【TAG】その他options:scales:xのオプションを追加します。 1560 * 1561 * @og.tag 1562 * <del>options:scales:xAxes の 要素の属性です。</del> 1563 * options:scales:xAxes → options:scales:x の 要素の属性です。 1564 * ※ chartJS上は、Axes(axisの複数形)と、Axis を使い分けていますが、属性は、axis で統一します。 1565 * 1566 * @og.rev 7.0.1.2 (2018/11/04) 属性の追加。 1567 * 1568 * @param attri その他options:scales:xAxesのオプション 1569 */ 1570 public void setOptAxis( final String attri ) { 1571 jsXAxis.addAxis( JsChartDataV3.AXIS , nval( getRequestParameter( attri ),null ) ); 1572 } 1573 1574 /** 1575 * 【TAG】その他options:scales:x:ticksのオプションを追加します。 1576 * 1577 * @og.tag 1578 * <del>options:scales:xAxes:ticks の 要素の属性です。</del> 1579 * options:scales:xAxes:ticks → options:scales:x:ticks の 要素の属性です。 1580 * 1581 * @og.rev 7.0.1.2 (2018/11/04) 属性の追加。 1582 * 1583 * @param attri その他options:scales:xAxes:ticksのオプション 1584 */ 1585 public void setOptTicks( final String attri ) { 1586 jsXAxis.addAxis( JsChartDataV3.TICKS , nval( getRequestParameter( attri ),null ) ); 1587 } 1588 1589 /** 1590 * 【TAG】その他options:scales:x:titleのオプションを追加します。 1591 * 1592 * @og.tag 1593 * <del>options:scales:xAxes:scaleLabel の 要素の属性です。</del> 1594 * options:scales:xAxes:scaleLabel → options:scales:x:title の 要素の属性です。 1595 * 1596 * @og.rev 7.0.1.2 (2018/11/04) 属性の追加。 1597 * 1598 * @param title options:scales:x:title要素 1599 */ 1600 public void setOptTitle( final String title ) { 1601 jsXAxis.addAxis( JsChartDataV3.TITLE , nval( getRequestParameter( title ),null ) ); 1602 } 1603 1604 /** 1605 * 【TAG】その他options:scales:x:gridのオプションを追加します。 1606 * 1607 * @og.tag 1608 * <del>options:scales:xAxes:gridLines の 要素の属性です。</del> 1609 * options:scales:xAxes:gridLines → options:scales:x:grid の 要素の属性です。 1610 * 1611 * @og.rev 7.0.1.2 (2018/11/04) 属性の追加。 1612 * 1613 * @param grid options:scales:x:gridの属性 1614 */ 1615 public void setOptGrid( final String grid ) { 1616 jsXAxis.addAxis( JsChartDataV3.GRID , nval( getRequestParameter( grid ),null ) ); 1617 } 1618 1619 /** 1620 * 【TAG】x軸のタイムの単位[year/quarter/month/week/day/hour/minute/second/millisecond]を指定します。 1621 * 1622 * @og.tag 1623 * (xscaleTypeがtimeの場合に有効。指定しない場合は自動) 1624 * options:scales:x:unit 1625 * 1626 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 1627 * @og.rev 6.9.9.4 (2018/10/01) nvalを入れて、属性復活。 1628 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1629 * 1630 * @param tunit x軸のタイムの単位 [year/quarter/month/week/day/hour/minute/second/millisecond] 1631 */ 1632 public void setTimeUnit( final String tunit ) { 1633 final String timeUnit = nval( getRequestParameter( tunit ),null ); 1634 1635 checkPara( timeUnit, SET_TIMEUNIT, "timeUnit" ); 1636 1637 jsXAxis.addTime( "unit" , timeUnit , USE_QUOTE ); // 文字列 1638 } 1639 1640 /** 1641 * 【TAG】x軸のタイムの単位幅を指定します(xscaleTypeがtimeの場合に有効)。 1642 * 1643 * @og.tag 1644 * options:scales:x:time:unitStepSize → options:scales:x:time:stepSize の 要素の属性です。 1645 * 1646 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 1647 * @og.rev 6.9.9.4 (2018/10/01) nvalを入れて、属性復活。 1648 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1649 * 1650 * @param tunitStepSize x軸のタイムの単位幅 1651 */ 1652 public void setTimeUnitStepSize( final String tunitStepSize ) { 1653 jsXAxis.addTime( "stepSize" , nval( getRequestParameter( tunitStepSize ),null ) , NO_QUOTE ); // 数値 1654 } 1655 1656 /** 1657 * 【TAG】x軸の設定するタイム(入力データ)のフォーマットを指定します(xscaleTypeがtimeの場合に有効)。 1658 * 1659 * @og.tag 1660 * フォーマットは、chartjs-adapter-date-fns.bundle.min.js の定義を使用します。 1661 * <a href="https://github.com/chartjs/chartjs-adapter-date-fns">chartjs-adapter-date-fns</a> 1662 * <a href="https://zenn.dev/snjssk/articles/f05d1bcfeb9604#format">date-fns format</a> 1663 * 例:yyyyMMddHHmmss 1664 * 1665 * 8.0.0.0 (2021/08/31) 1666 * 代わりに、options:scales:x:time.parser で指定します。 1667 * 1668 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 1669 * @og.rev 6.9.9.4 (2018/10/01) nvalを入れて、属性復活。 1670 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1671 * @og.rev 8.0.0.0 (2021/08/31) timeSetFormat → timeParser 変更 1672 * 1673 * @param tFormat x軸の設定するタイムのフォーマット処理 1674 */ 1675 public void setTimeParser( final String tFormat ) { 1676 jsXAxis.addTime( "parser" , nval( getRequestParameter( tFormat ),null ) , USE_QUOTE ); // 文字列 1677 } 1678 1679 /** 1680 * 【TAG】x軸の表示するタイムのフォーマットを指定します(xscaleTypeがtimeの場合に有効)。 1681 * 1682 * @og.tag 1683 * 8.0.0.0 (2021/08/31) 1684 * Moment.js の依存関係が切れ、openGionV8では、date-fns を使用します。 1685 * <a href="https://date-fns.org/v2.23.0/docs/format">date-fns format</a> 1686 * ※ yyyy が、YYYY になっているが、よく分からない。 1687 * 1688 * 基本形:yyyyMMddHHmmss 1689 * options:scales:x:time:displayFormats 1690 * 1691 * <table class="plain"> 1692 * <caption>タイムのフォーマット(抜粋)</caption> 1693 * <tr><th>Pattern </th><th>Result examples </th><th>Unit </th></tr> 1694 * <tr><td>yyyy </td><td>0044, 0001, 1900, 2017 </td><td>Calendar year </td></tr> 1695 * <tr><td>M </td><td>1, 2, ..., 12 </td><td>Month (formatting) </td></tr> 1696 * <tr><td>MM </td><td>01, 02, ..., 12 </td><td>Month (formatting) </td></tr> 1697 * <tr><td>MMM </td><td>Jan, Feb, ..., Dec </td><td>Month (formatting) </td></tr> 1698 * <tr><td>MMMM </td><td>January, February, ..., December </td><td>Month (formatting) </td></tr> 1699 * <tr><td>d </td><td>1, 2, ..., 31 </td><td>Day of month </td></tr> 1700 * <tr><td>dd </td><td>01, 02, ..., 31 </td><td>Day of month </td></tr> 1701 * <tr><td>H </td><td>0, 1, 2, ..., 23 </td><td>Hour [0-23] </td></tr> 1702 * <tr><td>HH </td><td>00, 01, 02, ..., 23 </td><td> </td></tr> 1703 * <tr><td>m </td><td>0, 1, ..., 59 </td><td>Minute </td></tr> 1704 * <tr><td>mm </td><td>00, 01, ..., 59 </td><td> </td></tr> 1705 * <tr><td>s </td><td>0, 1, ..., 59 </td><td>Second </td></tr> 1706 * <tr><td>ss </td><td>00, 01, ..., 59 </td><td> </td></tr> 1707 * <tr><td>S </td><td>0, 1, ..., 9 </td><td>Fraction of second </td></tr> 1708 * <tr><td>SS </td><td>00, 01, ..., 99 </td><td> </td></tr> 1709 * <tr><td>SSS </td><td>000, 001, ..., 999 </td><td> </td></tr> 1710 * </table> 1711 * 1712 * timeLblFormatが指定されている場合、全てのdisplayFormatsにtimeLblFormatを設定する 1713 * 1714 * @og.rev 6.9.9.3 (2018/09/25) xscaleType の time 属性廃止。 1715 * @og.rev 6.9.9.4 (2018/10/01) nvalを入れて、属性復活。 1716 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1717 * 1718 * @param tLblFormat x軸の表示するタイムのフォーマット 1719 * @see #setTimeParser(String) 1720 */ 1721 public void setTimeLblFormat( final String tLblFormat ) { 1722 final String timeFmt = nval( getRequestParameter( tLblFormat ),null ); 1723 if( timeFmt != null ) { 1724 final StringBuilder buf = new StringBuilder( BUFFER_MIDDLE ) 1725 .append( "{year:'" ).append( timeFmt ) 1726 .append( "',quarter:'" ).append( timeFmt ) 1727 .append( "',month:'" ).append( timeFmt ) 1728 .append( "',week:'" ).append( timeFmt ) 1729 .append( "',day:'" ).append( timeFmt ) 1730 .append( "',hour:'" ).append( timeFmt ) 1731 .append( "',minute:'" ).append( timeFmt ) 1732 .append( "',second:'" ).append( timeFmt ) 1733 .append( "'}" ); 1734 1735 jsXAxis.addTime( "displayFormats" , buf.toString() , NO_QUOTE ); // オブジェクトなので、クオートなし 1736 } 1737 } 1738 1739 /** 1740 * 【TAG】x軸の時間のツールチップに使用するフォーマット(タイムスケール用)を指定します(xscaleTypeがtimeの場合に有効)。 1741 * 1742 * @og.tag 1743 * 8.0.0.0 (2021/08/31) 1744 * Moment.js の依存関係が切れ、openGionV8では、date-fns を使用します。 1745 * <a href="https://date-fns.org/v2.23.0/docs/format">date-fns format</a> 1746 * 1747 * 基本形:yyyyMMddHHmmss 1748 * options:scales:x:time:tooltipFormat 1749 * 1750 * フォーマットは、timeLblFormat (内部的には、time:displayFormats)と同じ 1751 * 1752 * @og.rev 7.0.1.0 (2018/10/15) 時間のツールチップに使用するフォーマット(タイムスケール用) 1753 * @og.rev 7.0.1.1 (2018/10/22) JsChartDataV3オブジェクトを使用。 1754 * 1755 * @param tipFormat x軸の表示するタイムのフォーマット 1756 * @see #setTimeParser(String) 1757 */ 1758 public void setTooltipFormat( final String tipFormat ) { 1759 jsXAxis.addTime( "tooltipFormat" , nval( getRequestParameter( tipFormat ),null ) , USE_QUOTE ); // 文字列 1760 } 1761 1762 //======================================================================================== 1763 1764 /** 1765 * 【TAG】y軸に横マーカーラインの設定値をCSV形式で複数指定します。 1766 * 1767 * @og.tag 1768 * X軸に平行に固定値の線を引きます。線の値を、CSV形式で指定します。 1769 * annotation:annotations オプションに名前付きで設定した中に yMin,yMax を定義します。 1770 * 以前は、value に値をセットしていましたが、,yMin:値,yMax:値 にセットします。 1771 * 1772 * 8.0.0.0 (2021/08/31) 1773 * chartjs-plugin-annotation を使用します。 1774 * 配列ではなく、名前付きの設定になります。(下記の例では、ymark0:) 1775 * options::plugins:annotation:annotations:ymark0:{ 1776 * type:'line', ← 固定です。 1777 * borderWidth:2, ← markWidthの値(ライン共通 初期値="2") 1778 * borderDash:[5,2], ← markDashの値(ライン共通 初期値=null) 1779 * yMin:値,yMax:値, ← markValuesの値 1780 * borderColor: '#FF0000', ← markColorsの値 1781 * label:{ 1782 * enabled:'true',position:'start', ← 固定です。 1783 * backgroundColor:'rgba(0,0,0,0)', ← 固定です。 1784 * font:{ size:10 }, ← markFontSizeの値(ライン共通 初期値=10) 1785 * content:'基準値', ← markLblsの値 1786 * yAdjust:-6, ← markAdjustの値 1787 * color:'#FF0000', ← markColorsの値 1788 * … , 1789 * }, 1790 * }, 1791 * 1792 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1793 * @og.rev 8.0.0.0 (2021/08/31) chartJs V3 で大きく変更されています。 1794 * 1795 * @param mkVals y軸に横マーカーラインの設定値(CSV形式) 1796 */ 1797 public void setMarkValues( final String mkVals ) { 1798 markValues = nval( getRequestParameter( mkVals ) , markValues ); 1799 } 1800 1801 /** 1802 * 【TAG】y軸に横マーカーラインの色をCSV形式で複数指定します。 1803 * 1804 * @og.tag 1805 * annotation:annotations オプションに名前付きで設定した中に borderColor を定義します。 1806 * 1807 * X軸に平行に固定値の線を引きます。線の色を、CSV形式で指定します。 1808 * markValues が指定されており、markColorsが指定されていない場合は、青色(BLUE)になります。 1809 * 色指定に、VIVID,PASTEL を使えるようにします。 1810 * 1811 * 詳細は、markValues の説明をご確認願います。 1812 * 1813 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1814 * @og.rev 7.0.1.3 (2018/11/12) 色指定に、VIVID,PASTEL を使えるようにします。 1815 * 1816 * @param mkCols y軸に横マーカーラインの色(CSV形式) 1817 * @see #setMarkValues(String) 1818 */ 1819 public void setMarkColors( final String mkCols ) { 1820 markColors = nval( getRequestParameter( mkCols ) , markColors ); 1821 } 1822 1823 /** 1824 * 【TAG】y軸に横マーカーラインのラベルをCSV形式で複数指定します。 1825 * 1826 * @og.tag 1827 * annotation:annotations オプションに名前付きで設定した中に 1828 * label:content を定義します。 1829 * 1830 * label 属性の enabled:'true',position:'start',backgroundColor:'rgba(0,0,0,0)', 1831 * font:{ size:10 } は固定で、color は、markColors 属性で指定した 1832 * y軸に横マーカーラインの色を使用します。 1833 * 色指定に、VIVID,PASTEL を使えるようにします。 1834 * 1835 * 詳細は、markValues の説明をご確認願います。 1836 * 1837 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1838 * 1839 * @param mklbls y軸に横マーカーラインのラベル(CSV形式) 1840 * @see #setMarkValues(String) 1841 */ 1842 public void setMarkLbls( final String mklbls ) { 1843 markLbls = nval( getRequestParameter( mklbls ) , markLbls ); 1844 } 1845 1846 /** 1847 * 【TAG】y軸に横マーカーラインのラベル表示位置の上下方向を調整します(初期値:-6)。 1848 * 1849 * @og.tag 1850 * annotation:annotations オプションに名前付きで設定した中に 1851 * label:yAdjust を定義します。 1852 * 1853 * これは、ラインに対するラベルの位置を表します。+で、下側、-で上側に表示します。 1854 * 初期値は、-6 で、ラインの上側に来るように調整しています。 1855 * 1856 * 詳細は、markValues の説明をご確認願います。 1857 * 1858 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 1859 * 1860 * @param mkAjst y軸に横マーカーラインのラベル表示位置の上下方向調整 1861 * @see #setMarkValues(String) 1862 */ 1863 public void setMarkAdjust( final String mkAjst ) { 1864 markAdjust = nval( getRequestParameter( mkAjst ) , markAdjust ); 1865 } 1866 1867 /** 1868 * 【TAG】x軸に横マーカーラインのラベルをCSV形式で複数指定します。 1869 * 1870 * @og.tag 1871 * annotation:annotations オプションに名前付きで設定した中に 1872 * label:content を定義します。 1873 * 1874 * label 属性の enabled:'true',position:'end',backgroundColor:'white', 1875 * font:{ size:10 } は固定で、color は、markColors 属性で指定した 1876 * x軸に横マーカーラインの色を使用します。 1877 * 色指定に、VIVID,PASTEL を使えるようにします。 1878 * 1879 * 詳細は、xmarkValues の説明をご確認願います。 1880 * 1881 * @og.rev 8.0.0.0 (2021/09/30) 新規追加 1882 * 1883 * @param mklbls x軸に横マーカーラインのラベル(CSV形式) 1884 * @see #setMarkValues(String) 1885 */ 1886 public void setXmarkLbls( final String mklbls ) { 1887 xmarkLbls = nval( getRequestParameter( mklbls ) , xmarkLbls ); 1888 } 1889 1890 /** 1891 * 【TAG】x軸に縦マーカーラインの設定値をCSV形式で複数指定します。 1892 * 1893 * @og.tag 1894 * annotation:annotations オプションに名前付きで設定した中に xMin,xMax を定義します。 1895 * 1896 * Y軸に平行に固定値の縦線を引きます。線の値を、CSV形式で指定します。 1897 * 以前は、value に値をセットしていましたが、,xMin:値,xMax:値 にセットします。 1898 * 1899 * type:'line',borderWidth:2,scaleID:'x0Ax', 固定です。 1900 * chartjs-plugin-annotation を使用します。 1901 * 配列ではなく、名前付きの設定になります。(下記の例では、xmark0:) 1902 * 1903 * options:plugins:annotation:annotations:xmark0:{ 1904 * type:'line', ← 固定です。 1905 * borderWidth:2, ← markWidthの値(ライン共通 初期値="2") 1906 * borderDash:[5,2], ← markDashの値(ライン共通 初期値=null) 1907 * xMin:値,xMax:値, ← xmarkValuesの値 1908 * borderColor:'#FF0000', ← xmarkColorsの値 1909 * }, 1910 * 1911 * @og.rev 7.0.1.1 (2018/10/22) xmarkValues,xmarkColors属性の追加 1912 * 1913 * @param mkVals x軸に縦マーカーラインの設定値(CSV形式) 1914 * @see #setMarkValues(String) 1915 */ 1916 public void setXmarkValues( final String mkVals ) { 1917 xmarkValues = nval( getRequestParameter( mkVals ) , xmarkValues ); 1918 } 1919 1920 /** 1921 * 【TAG】x軸に縦マーカーラインの色をCSV形式で複数指定します。 1922 * 1923 * @og.tag 1924 * annotation:annotations オプションに名前付きで設定した中に borderColor を定義します。 1925 * 1926 * Y軸に平行に固定値の縦線を引きます。線の色を、CSV形式で指定します。 1927 * xmarkValues が指定されており、xmarkColorsが指定されていない場合は、青色(BLUE)になります。 1928 * 1929 * @og.rev 7.0.1.1 (2018/10/22) xmarkValues,xmarkColors属性の追加 1930 * @og.rev 7.0.1.3 (2018/11/12) 色指定に、VIVID,PASTEL を使えるようにします。 1931 * 1932 * @param mkCols x軸に縦マーカーラインの色(CSV形式) 1933 * @see #setXmarkValues(String) 1934 */ 1935 public void setXmarkColors( final String mkCols ) { 1936 xmarkColors = nval( getRequestParameter( mkCols ) , xmarkColors ); 1937 } 1938 1939 /** 1940 * 【TAG】x軸,y軸全マーカーライン共通のラインの幅を指定します:borderWidth(初期値:2)。 1941 * 1942 * @og.tag 1943 * annotation:annotations オプションに名前付きで設定した中に borderWidth を定義します。 1944 * 1945 * この値は、x軸,y軸関係なく、マーカーラインの順番も関係なく、共通設定になります。 1946 * 1947 * @og.rev 7.0.1.1 (2018/10/22) markWidth,markDash,markFontSize属性の追加 1948 * 1949 * @param width マーカーライン共通のラインの幅 1950 * @see #setMarkValues(String) 1951 */ 1952 public void setMarkWidth( final String width ) { 1953 markWidth = nval( getRequestParameter( width ) , markWidth ); 1954 } 1955 1956 /** 1957 * 【TAG】x軸,y軸全マーカーライン共通のラインに点線を指定([5,2]など)します:borderDash(初期値:null)。 1958 * 1959 * @og.tag 1960 * annotation:annotations オプションに名前付きで設定した中に borderDash を定義します。 1961 * 1962 * この値は、x軸,y軸関係なく、マーカーラインの順番も関係なく、共通設定になります。 1963 * markDash="[5,2]" とすれば、線の長さが5px , 線と線の間が2px になります。 1964 * 1965 * @og.rev 7.0.1.1 (2018/10/22) markWidth,markDash,markFontSize属性の追加 1966 * 1967 * @param dash マーカーライン共通のラインの点線の形状 1968 * @see #setMarkValues(String) 1969 */ 1970 public void setMarkDash( final String dash ) { 1971 markDash = nval( getRequestParameter( dash ) , markDash ); 1972 } 1973 1974 /** 1975 * 【TAG】x軸,y軸全マーカーライン共通のラベルのフォントサイズを指定します:label:font:size(初期値:10)。 1976 * 1977 * @og.tag 1978 * annotation:annotations オプションに名前付きで設定した中に 1979 * label:font:size を定義します。 1980 * 1981 * この値は、x軸,y軸関係なく、マーカーラインの順番も関係なく、共通設定になります。 1982 * 1983 * @og.rev 7.0.1.1 (2018/10/22) markWidth,markDash,markFontSize属性の追加 1984 * 1985 * @param size マーカーライン共通のフォントサイズ 1986 * @see #setMarkValues(String) 1987 */ 1988 public void setMarkFontSize( final String size ) { 1989 markFontSize = nval( getRequestParameter( size ) , markFontSize ); 1990 } 1991 1992 //======================================================================================== 1993 1994 /** 1995 * 【TAG】すべてのデータが0の場合、使用しないかどうか[true:除外する/false:除外しない]を指定します(初期値:false)。 1996 * 1997 * @og.tag 1998 * JSON データを作成して、JsChartV3に渡しますが、このフラグを true に設定すると 1999 * 0 または、null(空文字列)のデータを出力しません。 6.8.3.0 (2017/11/27) 2000 * グラフ系で、0 が、ありえない値として設定されている場合に、使用すると、 2001 * 出力するデータ量を抑えることが出来ます。 2002 * 2003 * @og.rev 6.7.7.0 (2017/03/31) useZeroDataOmit属性の追加 2004 * 2005 * @param useZeroOmit データが0の場合の使用可否 [true:除外する/false:除外しない] 2006 */ 2007 public void setUseZeroDataOmit( final String useZeroOmit ) { 2008 useZeroDataOmit = nval( getRequestParameter( useZeroOmit ) , useZeroDataOmit ); 2009 } 2010 2011 /** 2012 * 【TAG】JSON出力で、値出力にレンデラを利用するかどうか[true/false]を指定します(初期値:false)。 2013 * 2014 * @og.tag 2015 * JSONのデータのレンデラー変換を行うかどうか。 2016 * 数値部分にはレンデラー変換は行いません。ラベル文字に行います。 2017 * 指定しない場合は使用しない(false)です。 2018 * 2019 * @og.rev 6.7.9.0 (2017/04/28) useRenderer 追加 2020 * 2021 * @param usernd レンデラーを利用するかどうか [true/false] 2022 */ 2023 public void setUseRenderer( final String usernd ) { 2024 useRenderer = nval( getRequestParameter( usernd ) , useRenderer ); 2025 } 2026 2027 /** 2028 * 【TAG】検索結果をこのカラムでソートし直します(初期値:null)。 2029 * 2030 * @og.tag 2031 * query で検索した結果を、JsChartV3で利用する場合、チャート上のソート順と、 2032 * リストや、別のチャートでの表示準が異なる場合に、このカラムで、ソートしなおします。 2033 * 通常は、labelColumn と同じ値でソートすることで、X軸の順番に表示されます。 2034 * 2035 * @og.rev 6.8.0.0 (2017/06/02) sortColumn 追加 2036 * 2037 * @param sortClm このカラムでソートし直す 2038 */ 2039 public void setSortColumn( final String sortClm ) { 2040 sortColumn = nval( getRequestParameter( sortClm ) , sortColumn ); 2041 } 2042 2043 /** 2044 * 【TAG】値の前後にクオートをはさむかどうか[true/false]指定します(初期値:false)。 2045 * 2046 * @og.tag 2047 * 以前は、yscaleType="category" のときに、値が、文字列のため、クオートで囲う判断をしていました。 2048 * その属性は、JsChartDataV3Tag に移ったため、新たなパラメータを用意します。 2049 * 将来的に、自動判定にするか、JsChartDataV3Tag から情報を取得するかもしれません。 2050 * 2051 * @og.rev 7.0.1.1 (2018/10/22) 新規登録 2052 * 2053 * @param flag 値の前後にクオートをはさむかどうか [true/false] 2054 */ 2055 public void setValueQuot( final String flag ) { 2056 valueQuot = nval( getRequestParameter( flag ),valueQuot ); 2057 } 2058 2059 /** 2060 * 【TAG】WheelZoom処理を使用するかどうか[true/false]を指定します(初期値:false)。 2061 * 2062 * @og.tag 2063 * plugins:zoom に、zoom:{wheel,pinch} と pan を定義します。(chartJs V3 の変更点) 2064 * これは、chartjs-plugin-zoom.js を使用します。 2065 * マウスホイールで、zoom処理、右クリックで移動(pan)します。 2066 * ダブルクリックで元の状態に戻します。 2067 * useDragZoom と同時指定した場合は、useZoom が優先されます。 2068 * 2069 * 初期値は、false:使用しないです。 2070 * 2071 * <ul> 2072 * <li>zoom:{mode:'xy',wheel:{enabled:true,},pinch:{enabled:true,},},</li> 2073 * <li>pan:{mode:'xy',enabled:true,},</li> 2074 * <li>canvasをクリックでzoomリセット </li> 2075 * </ul> 2076 * 2077 * options:plugins:zoom:{ 2078 * zoom:{mode:'xy',wheel:{enabled:true,},pinch:{enabled:true,},}, 2079 * pan:{mode:'xy',enabled:true,}, 2080 * }, 2081 * 2082 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 2083 * 2084 * @param flag WheelZoom処理を使用するかどうか [true:使用する/false:使用しない]。 2085 */ 2086 public void setUseZoom( final String flag ) { 2087 useZoom = nval( getRequestParameter( flag ) , useZoom ); 2088 } 2089 2090 /** 2091 * 【TAG】DragZoom処理を使用するかどうか[true/false]を指定します(初期値:false)。 2092 * 2093 * @og.tag 2094 * plugins:zoom に zoom:{drag} と pan:{modifierKey: 'ctrl',} を定義します。(chartJs V3 の変更点) 2095 * これは、chartjs-plugin-zoom.js を使用します。 2096 * 右クリックで範囲指定で、zoom処理、CTRLボタンを押しながら、右クリックで移動(pan)します。 2097 * ダブルクリックで元の状態に戻します。 2098 * useDragZoom と同時指定した場合は、useZoom が優先されます。 2099 * 2100 * 初期値は、false:使用しないです。 2101 * 2102 * <ul> 2103 * <li>zoom:{drag:{enabled:true,borderColor:'rgb(54,162,235)',borderWidth:1,backgroundColor:'rgba(54,162,235,0.3)'},},</li> 2104 * <li>pan:{mode:'xy',enabled:true,modifierKey: 'ctrl',},</li> 2105 * <li>canvasをクリックでzoomリセット </li> 2106 * </ul> 2107 * 2108 * options:plugins:zoom:{ 2109 * zoom:{drag:{enabled:true,borderColor:'rgb(54,162,235)',borderWidth:1,backgroundColor:'rgba(54,162,235,0.3)'},}, 2110 * pan:{mode:'xy',enabled:true,modifierKey: 'ctrl',}, 2111 * }, 2112 * 2113 * @og.rev 6.8.5.0 (2018/01/09) 新規登録 2114 * 2115 * @param flag DragZoom処理を使用するかどうか [true:使用する/false:使用しない]。 2116 */ 2117 public void setUseDragZoom( final String flag ) { 2118 useDragZoom = nval( getRequestParameter( flag ) , useDragZoom ); 2119 } 2120 2121 /** 2122 * 【TAG】TableModelの指定のカラム(CSV形式)をconstの配列変数として出力します。 2123 * 2124 * @og.tag 2125 * これは、指定のカラムのデータをJavaScriptのconst変数定義で配列として出力します。 2126 * labelColumn や、JsChartDataV3Tag の chartColumn と同じ方法です。 2127 * 2128 * 例えば、TableModelを、sortColumn でソートすると、JsChartDataV3Tag の pointBGColor 2129 * の配列順も変わりますので、ソートされた状態で出力したいことがあると思います。 2130 * 2131 * 8.0.0.0 (2021/08/31) 2132 * chartTypeが、bubble の場合、 2133 * x:は、jsChartData の chartColumn 2134 * y:は、varColumns で指定した1番目のカラム 2135 * r:は、varColumns で指定した2番目のカラム 2136 * scatter の場合は、y:の1番目のカラムのみ使用します。 2137 * 2138 * @og.rev 7.0.1.2 (2018/11/04) 新規登録 2139 * @og.rev 8.0.0.0 (2021/08/31) BUBBLEとSCATTERの追加 2140 * 2141 * @param clms 指定のカラム(CSV形式)をconstの配列変数として出力 2142 */ 2143 public void setVarColumns( final String clms ) { 2144 varColumns = nval( getRequestParameter( clms ) , varColumns ); 2145 } 2146 2147// /** 2148// * 【TAG】const定義するJavaScript変数に使用できるかどうか[true/false]指定します。 2149// * 2150// * @og.tag 2151// * const定義するJavaScript変数に使用できる文字は、決まっています。 2152// * 2153// * 1文字目は数字と、特殊記号(アンダーバー(_)、ドル記号($)を除く)、をチェックします。 2154// * 厳密には、予約文字が使えなかったりするが、簡易チェックとする。 2155// * 前後の空白文字は除外、それ以外の特殊記号は、アンダーバー(_)に変換します。 2156// * 初期値[false] 2157// * 2158// * @og.rev 8.0.0.0 (2021/09/30) 新規登録 2159// * 2160// * @param flag JavaScript変数に使用できるかどうか[true/false]指定 2161// */ 2162// public void setUseVarCheck( final String flag ) { 2163// useVarCheck = nval( getRequestParameter( flag ) , useVarCheck ); 2164// } 2165 2166 //======================================================================================== 2167 2168 /** 2169 * 【TAG】(通常は使いません)sessionから所得する DBTableModelオブジェクトの ID。 2170 * 2171 * @og.tag 2172 * (通常は使いません)sessionから所得する DBTableModelオブジェクトの ID。 2173 * 2174 * @og.rev 6.9.9.3 (2018/09/25) nvalを入れて、初期値を設定します。 2175 * 2176 * @param tableId テーブルID 2177 */ 2178 public void setTableId( final String tableId ) { 2179 this.tableId = nval( getRequestParameter( tableId ) , this.tableId ); 2180 } 2181 2182 /** 2183 * このオブジェクトの文字列表現を返します。 2184 * 基本的にデバッグ目的に使用します。 2185 * 2186 * @return このクラスの文字列表現 2187 */ 2188 @Override 2189 public String toString() { 2190 final StringBuilder buf = new StringBuilder( BUFFER_MIDDLE ) 2191 .append( "X_AXIS=" ).append( jsXAxis ).append( CR ); 2192 2193 jsChartData.forEach( js -> buf.append( "Y_AXIS=" ).append( jsXAxis ).append( CR ) ); 2194 2195 return ToString.title( this.getClass().getName() ) 2196 .println( "VERSION" , VERSION ) 2197 .println( "id" , id ) 2198 .println( "tableId" , tableId ) 2199 .println( "chartType" , chartType ) 2200 .println( "width" , width ) 2201 .println( "height" , height ) 2202 .println( "barWidthPer" , barWidthPer ) 2203 .println( "title" , title ) 2204 .println( "titlePosition" , titlePosition ) 2205 .println( "legendPosition" , legendPosition ) 2206 .println( "legendDisplay" , legendDisplay ) 2207 .println( "xscaleType" , xscaleType ) 2208 .println( "optOptions" , optOptions ) // 7.0.1.2 (2018/11/04) 2209// .println( "optChart" , optChart ) // 7.0.1.2 (2018/11/04) 2210 .fixForm().println() 2211 .println( buf ).toString(); 2212 } 2213}