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