PageSourceSearch

https://hd.dowa.co.jp/resources/templating-kit/js/Chartcanvas_component.js

js dowa.co.jp collected 2026-10-02 06:25:26 UTC 34,688 bytes, 1,032 lines download raw bytes

1/**
2 * コンポーネント用グラフ描画スクリプト
3 *
4 */
5
6/**
7 * グラフ種類
8 */
9 var GRAPH_TYPE_PIE_HIGHCHART = 'pie';
10 var GRAPH_TYPE_COLUMN_HIGHCHART = 'column';
11 var GRAPH_TYPE_COLUMN_STACK_HIGHCHART = 'column_stack';
12 var GRAPH_TYPE_BAR_STACK_HIGHCHART = 'bar_stack';
13 var GRAPH_TYPE_LINE_HIGHCHART = 'line';
14 var GRAPH_TYPE_COMPLEX_HIGHCHART = 'complex';
15 var GRAPH_TYPE_COMPLEX_HIGHCHART_TYPE2 = 'complexType2';
16 var GRAPH_TYPE_BAR_HIGHCHART = 'bar';
17 var BAR_YAXIS_TITLE_OFFSET = 20;
18
19 // 2018年 棒グラフ(四半期)、配当を追加
20 var GRAPH_TYPE_COLUMN_QUARTER_HIGHCHART = 'column_quarter';
21 var GRAPH_TYPE_LINE_QUARTER_HIGHCHART = 'line_quarter';
22 var GRAPH_TYPE_HAITOU_HIGHCHART = 'haitou';
23 var theme_haitou = {
24		credits: {
25			enabled: false
26		},
27		chart: {
28			marginTop: 60
29		},
30		title: {
31			text: ''
32		},
33		xAxis: {
34			labels: {
35				style: {
36					color: '#000000',
37					font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
38				}
39			},
40			gridLineColor: '#cccccc'
41		},
42		yAxis: {
43			reversedStacks: false,
44			labels: {
45				style: {
46					color: '#000000',
47					font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
48				}
49			},
50			title: {
51				style: {
52					color: '#000000',
53					font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
54				}
55			},
56			gridLineColor: '#cccccc'
57		},
58		navigation: {
59			buttonOptions: {
60				align: 'right',
61				x: -45,
62				y: -60
63			}
64		}
65};
66
67 var theme_column_quarter = {
68			credits: {
69				enabled: false
70			},
71			chart: {
72				marginTop: 60
73			},
74			title: {
75				text: ''
76			},
77            legend: {
78                enabled: false
79            },
80            xAxis: {
81				labels: {
82					style: {
83						color: '#000000',
84						font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
85					}
86				},
87				gridLineColor: '#cccccc'
88			},
89			yAxis: {
90				reversedStacks: false,
91				labels: {
92					style: {
93						color: '#000000',
94						font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
95					}
96				},
97				title: {
98					style: {
99						color: '#000000',
100						font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
101					}
102				},
103				gridLineColor: '#cccccc'
104			},
105			navigation: {
106				buttonOptions: {
107					align: 'right',
108					x: -45,
109					y: -60
110				}
111			}
112	};
113 var theme_line_quarter = {
114			credits: {
115				enabled: false
116			},
117			chart: {
118				marginTop: 60
119			},
120			title: {
121				text: ''
122			},
123         legend: {
124             enabled: false
125         },
126         xAxis: {
127				labels: {
128					style: {
129						color: '#000000',
130						font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
131					}
132				},
133				gridLineColor: '#cccccc'
134			},
135			yAxis: {
136				reversedStacks: false,
137				labels: {
138					style: {
139						color: '#000000',
140						font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
141					}
142				},
143				title: {
144					style: {
145						color: '#000000',
146						font: '12px Meiryo, Hiragino Kaku Gothic Pro, MS PGothic, sans-serif'
147					}
148				},
149				gridLineColor: '#cccccc'
150			},
151			navigation: {
152				buttonOptions: {
153					align: 'right',
154					x: -45,
155					y: -60
156				}
157			}
158	};
159 var m_series1LatestColor = "#87CEFA";
160 var m_series2LatestColor = "#33CC66";
161 var m_series3LatestColor = "#FF99CC";
162 var m_series4LatestColor = "#E9FE72";
163 var column_quarter_colors = ["#FFCC99", "#FFCC00", "#FF9900", "#EB5E00", m_series1LatestColor, m_series2LatestColor, m_series3LatestColor, m_series4LatestColor];
164 var line_quarter_colors = ["#FFCC99", "#FFCC00", "#FF9900", "#EB5E00", m_series1LatestColor, m_series2LatestColor, m_series3LatestColor, m_series4LatestColor];
165 var haitou_colors = ["#7CB5EC", "#8085E9", "#90ED7D", "#F7A35C", "#F15C80", "#E4D354"];
166
167 var LEFT_AXIS_ID = 'left-y-axis';
168 var RIGHT_AXIS_ID = 'right-y-axis';
169
170// グラフ描画用インスタンス遠陬
171var chart;
172
173/**
174 * 入力情報からグラフの生成を行う。
175 *
176 */
177function initChart (
178                        // graph properties
179                        id, gtitle, gtype, glegend, ganimation, gwidth, gheight,
180                        gbackcolor, gcolor, gtablerow, gtablecolumn, glabel,
181                        gaffiliate, gtabledata,
182                        // lefttitle
183                        gleftunitenable,gleftunitlabel,gleftunitminvalue,gleftunitmaxvalue,
184                        // righttitle
185                        grightunitenable,grightunitlabel,grightunitminvalue,grightunitmaxvalue
186){
187    var json_Axis=[];
188    var rightAxisID = 0;
189    var leftAxisID = 0;
190    var offset=0;
191    var bar_rightunit='';
192    var rightunittext_axis = '';
193    var leftunittext_axis = '';
194    var leftStartOnTick=true;
195    var leftEndOnTick=true;
196    var rightStartOnTick=true;
197    var rightEndOnTick=true;
198    var alignTicks = true;
199    var tooltip_unitlabel='';
200    var oppositeOn=false;
201    // ■グラフ種類ごとに系列データを作成
202    //   highchartsで定められるグラフ種類ごとのデータ形式を作成する。
203    var json_data = [];
204    var type_local = gtype;
205    var inverted_local = false;
206    var json_tooltip = [];
207    var color =[];
208    var data =[];
209    var label = [];
210    var affiliate = [];
211    var haitou = 0;
212    var teaserCount = 0;
213    // データをJavaScriptオブジェクト変換
214    //   入力情報をjavaScriptオブジェクトに変換する。
215
216
217    if(ganimation) {
218        if(ganimation =='disable') {
219            ganimation = false;
220        } else {
221           ganimation = true;
222        }
223    }
224
225    if(gtabledata) {
226        try {
227            data = JSON.parse(gtabledata);
228        } catch(e) {
229            console.log('input graph data is invalid');
230            document.write('input graph data is invalid');
231            return;
232        }
233    } else {
234            console.log('input graph data is invalid');
235            document.write('input graph data is invalid');
236            return;
237    }
238
239    if(gcolor) {
240        try{
241            color = JSON.parse(gcolor);
242			if (gtype == GRAPH_TYPE_COLUMN_QUARTER_HIGHCHART) {
243				// 棒グラフ(四半期)デフォルトカラー設定
244//				for(let i in column_quarter_colors) {
245//					if (color[i] == null) {
246//						color[i] = column_quarter_colors[i];
247//					} else {
248//						if (i == 4) {
249//							m_series1LatestColor = color[i];
250//						} else if (i == 5) {
251//							m_series2LatestColor = color[i];
252//						} else if (i == 6) {
253//							m_series3LatestColor = color[i];
254//						} else if (i == 7) {
255//							m_series4LatestColor = color[i];
256//						}
257//					}
258//				}
259				column_quarter_colors.forEach (function (value, i) {
260					if (color[i] == null) {
261						color[i] = value;
262					} else {
263						if (i == 4) {
264							m_series1LatestColor = color[i];
265						} else if (i == 5) {
266							m_series2LatestColor = color[i];
267						} else if (i == 6) {
268							m_series3LatestColor = color[i];
269						} else if (i == 7) {
270							m_series4LatestColor = color[i];
271						}
272					}
273				}
274				);
275			} else if (gtype == GRAPH_TYPE_LINE_QUARTER_HIGHCHART) {
276				// 棒グラフ(四半期)デフォルトカラー設定
277//				for(let i in line_quarter_colors) {
278//					if (color[i] == null) {
279//						color[i] = line_quarter_colors[i];
280//					} else {
281//						if (i == 4) {
282//							m_series1LatestColor = color[i];
283//						} else if (i == 5) {
284//							m_series2LatestColor = color[i];
285//						} else if (i == 6) {
286//							m_series3LatestColor = color[i];
287//						} else if (i == 7) {
288//							m_series4LatestColor = color[i];
289//						}
290//					}
291//				}
292                line_quarter_colors.forEach (function (value, i) {
293					if (color[i] == null) {
294						color[i] = value;
295					} else {
296						if (i == 4) {
297							m_series1LatestColor = color[i];
298						} else if (i == 5) {
299							m_series2LatestColor = color[i];
300						} else if (i == 6) {
301							m_series3LatestColor = color[i];
302						} else if (i == 7) {
303							m_series4LatestColor = color[i];
304						}
305					}
306				}
307				);
308			} else if (gtype == GRAPH_TYPE_HAITOU_HIGHCHART) {
309				// 配当 デフォルトカラー設定
310//				for(let i in haitou_colors) {
311//					if (color[i] == null)
312//						color[i] = haitou_colors[i];
313//				}
314				haitou_colors.forEach(function(value, i) {
315					if (color[i] == null)
316						color[i] = value;
317				}
318				);
319			}
320
321		} catch(e) {
322            console.log('input graph color is invalid');
323        }
324    }
325
326    if(glabel) {
327        try {
328            // ¥および¥nをエスケープ処理し、JSONパースする
329            label = JSON.parse(glabel.replace(/\\/g, "\\\\").replace(/\n/g, "\\n"));
330        } catch(e) {
331            console.log('input graph Xlabel is invalid');
332        }
333    }
334
335    if(gaffiliate) {
336        try{
337            // ¥および¥nをエスケープ処理し、JSONパースする
338            affiliate = JSON.parse(gaffiliate.replace(/\\/g, "\\\\").replace(/\n/g, "\\n"));
339        } catch(e) {
340            console.log('input graph affiliate is invalid');
341        }
342    }
343
344    // gleftunitminvalueの数値チェック
345    if(!gleftunitminvalue || !isFinite(gleftunitminvalue)) {
346        gleftunitminvalue=null;
347    } else {
348        gleftunitminvalue=parseInt(gleftunitminvalue);
349    }
350
351    // gleftunitmaxvalueの数値チェック
352    if(!gleftunitmaxvalue || !isFinite(gleftunitmaxvalue)) {
353        gleftunitmaxvalue=null;
354    } else {
355        gleftunitmaxvalue=parseInt(gleftunitmaxvalue);
356    }
357    // grightunitminvalueの数値チェック
358    if(!grightunitminvalue || !isFinite(grightunitminvalue)) {
359        grightunitminvalue=null;
360    } else {
361        grightunitminvalue=parseInt(grightunitminvalue);
362    }
363    // grightunitmaxvalueの数値チェック
364    if(!grightunitmaxvalue || !isFinite(grightunitmaxvalue)) {
365        grightunitmaxvalue=null;
366    } else {
367        grightunitmaxvalue=parseInt(grightunitmaxvalue);
368    }
369
370    // gwidthの数値チェック
371    if(!gwidth || !isFinite(gwidth)) {
372        gwidth=null;
373    } else {
374        gwidth=parseInt(gwidth);
375    }
376
377    // gheightの数値チェック
378    if(!gheight || !isFinite(gheight)) {
379        gheight=null;
380    } else {
381        gheight=parseInt(gheight);
382    }
383
384    // ■軸情報から軸データを生成
385    if(gleftunitenable && !grightunitenable) {
386
387        if(gtype==GRAPH_TYPE_BAR_STACK_HIGHCHART) {
388            // 積み上げ(横)グラフの場合、左軸の表示位置を調整
389            offset = BAR_YAXIS_TITLE_OFFSET;
390        }
391
392        // 左軸有効の場合は、左軸ラベルをツールチップと左軸に表示
393        leftunittext_axis = gleftunitlabel;
394        tooltip_unitlabel = gleftunitlabel;
395
396        // 最大値が設定されている場合は、EndOnTickをfalseに設定する。
397        if(gleftunitmaxvalue!=null) {
398            leftEndOnTick=false;
399            alignTicks=false;
400        }
401
402        // 最小値が設定されている場合は、StartOnTickをfalseに設定する。
403        if(gleftunitminvalue!=null) {
404            leftStartOnTick=false;
405        }
406
407        // 軸情報から軸データを生成
408        json_Axis[0]={"id":LEFT_AXIS_ID,
409                    showFirstLabel:true,
410                    showLastLabel:true,
411                    "min":gleftunitminvalue,
412                    "max":gleftunitmaxvalue,
413                    startOnTick: leftStartOnTick,
414                    endOnTick:leftEndOnTick,
415                    "title": {
416                        "align": "high",
417                        "offset": offset,
418                        "text": leftunittext_axis,
419                        "rotation": 0,
420                        "y": -10},
421                    "labels": {
422                        "formatter": function() {
423                            return String(this.value).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
424                        }
425                    }
426                     };
427        // 複合グラフ用軸IDを保持
428        leftAxisID = LEFT_AXIS_ID;
429    } else if(gleftunitenable && grightunitenable) {
430        if(gtype==GRAPH_TYPE_BAR_STACK_HIGHCHART) {
431            // 積み上げ(横)グラフの場合、左軸の表示位置を調整
432            offset = BAR_YAXIS_TITLE_OFFSET;
433            // 右軸非表示
434        } else {
435            // 積み上げ(横)グラフ以外の場合、かつ右軸有効の場合は、右軸ラベルをツールチップと右軸に表示
436            rightunittext_axis = grightunitlabel;
437        }
438
439
440        // 左軸有効の場合は、左軸ラベルをツールチップと左軸に表示
441        leftunittext_axis = gleftunitlabel;
442        tooltip_unitlabel = gleftunitlabel;
443
444        // 最大値が設定されている場合は、EndOnTickをfalseに設定する。
445        if(gleftunitmaxvalue!=null) {
446            leftEndOnTick=false;
447            alignTicks=false;
448        }
449
450        // 最小値が設定されている場合は、StartOnTickをfalseに設定する。
451        if(gleftunitminvalue!=null) {
452            leftStartOnTick=false;
453        }
454
455        // 最大値が設定されている場合は、EndOnTickをfalseに設定する。
456        if(grightunitmaxvalue!=null) {
457            rightEndOnTick=false;
458            alignTicks=false;
459        }
460
461        // 最小値が設定されている場合は、StartOnTickをfalseに設定する。
462        if(grightunitminvalue!=null) {
463            rightStartOnTick=false;
464        }
465
466        // 左軸データ生成
467        json_Axis[0]={"id":LEFT_AXIS_ID,
468                    showFirstLabel:true,
469                    showLastLabel:true,
470                "min":gleftunitminvalue,
471                "max":gleftunitmaxvalue,
472                startOnTick: leftStartOnTick,
473                endOnTick:leftEndOnTick,
474                "title": {
475                    "align": "high",
476                    "offset": offset,
477                    "text": leftunittext_axis,
478                    "rotation": 0,
479                    "y": -10},
480                "labels": {
481                    "formatter": function() {
482                        return String(this.value).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
483                    }
484                }
485                };
486        //複合グラフ用軸IDを保持
487        leftAxisID = LEFT_AXIS_ID;
488
489        // 右軸データ生成
490        json_Axis[1]={"id":RIGHT_AXIS_ID,
491                    showFirstLabel:true,
492                    showLastLabel:true,
493                "opposite": true,
494                "min":grightunitminvalue,
495                "max":grightunitmaxvalue,
496                startOnTick: rightStartOnTick,
497                endOnTick:rightEndOnTick,
498                "title": {
499                    "align": "high",
500                    "offset": 0,
501                    "text": rightunittext_axis,
502                    "rotation": 0,
503                    "y": -10,
504                    "x": 10},
505                "labels": {
506                    "formatter": function() {
507                        return String(this.value).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
508                    }
509                }
510                 };
511
512        //複合グラフ用軸IDを保持
513        rightAxisID = RIGHT_AXIS_ID;
514    } else if(!gleftunitenable && grightunitenable) {
515
516        // 右軸有効の場合は、右軸ラベルをツールチップと左軸に表示
517        rightunittext_axis = grightunitlabel;
518        tooltip_unitlabel = grightunitlabel;
519
520        // 最大値が設定されている場合は、EndOnTickをfalseに設定する。
521        if(grightunitmaxvalue!=null) {
522            rightEndOnTick=false;
523            alignTicks=false;
524        }
525
526        // 最小値が設定されている場合は、StartOnTickをfalseに設定する。
527        if(grightunitminvalue!=null) {
528            rightStartOnTick=false;
529        }
530
531        alignTicks=false;
532        // 左軸データ生成
533        json_Axis[0]={"id":LEFT_AXIS_ID,
534                "labels":{
535                	enabled:false,
536                },
537                gridLineWidth: 0,
538                tickWidth:0,
539                lineWidth: 0,
540                "title": {"text": ""}
541                };
542        //複合グラフ用軸IDを保持
543        leftAxisID = LEFT_AXIS_ID;
544
545        // 右軸データ生成
546        json_Axis[1]={"id":RIGHT_AXIS_ID,
547                    showFirstLabel:true,
548                    showLastLabel:true,
549            "opposite": true,
550            "min":grightunitminvalue,
551            "max":grightunitmaxvalue,
552            startOnTick: rightStartOnTick,
553            endOnTick:rightEndOnTick,
554            "title": {
555                "align": "high",
556                "offset": 0,
557                "text": rightunittext_axis,
558                "rotation": 0,
559                "y": -10,
560                "x": 10},
561            "labels": {
562                "formatter": function() {
563                    return String(this.value).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
564                }
565            }
566             };
567
568        //複合グラフ用軸IDを保持
569        rightAxisID = RIGHT_AXIS_ID;
570    } else {
571        // 単位表示なしの左軸データ生成
572        // 左軸データ生成
573        json_Axis[0]={"id":LEFT_AXIS_ID,
574                "labels":{
575                	enabled:false,
576                },
577                gridLineWidth: 0,
578                tickWidth:0,
579                lineWidth: 0,
580                "title": {"text": ""}
581        };
582        //複合グラフ用軸IDを保持
583        leftAxisID = LEFT_AXIS_ID;
584
585        // 右軸データ生成
586        json_Axis[1]={"id":RIGHT_AXIS_ID,
587            "opposite": true,
588            gridLineWidth: 0,
589            "labels":{
590            	enabled:false
591            },
592            "title": {"text": ""}
593        };
594    }
595
596    var pos = id.indexOf("-",0);
597    teaserCount = id.substr(pos + 1);
598
599    for(var i=0; i<gtablerow; i++) {
600        if(gtype == GRAPH_TYPE_PIE_HIGHCHART) {
601            // - 円グラフ用データ作成
602            var series_data = [];
603            for(var j=0; j<gtablecolumn; j++) {
604                // データごとに色、X軸ラベルを設定する
605                if(color[j]!=null && color[j]!="") {
606                    series_data[j] = {"name":label[j], "y":data[i][j],"color":color[j]};
607                } else {
608                    series_data[j] = {"name":label[j], "y":data[i][j]};
609                }
610            }
611            json_data[i] ={"name":affiliate[i], "data":series_data, "animation": ganimation};
612        } else if(gtype == GRAPH_TYPE_COLUMN_STACK_HIGHCHART) {
613            // 積み上げ(縦)
614            // 系列ごとに色を設定、stacking optionを"normal"に設定
615            type_local = GRAPH_TYPE_COLUMN_HIGHCHART;
616            json_data[i] ={"name":affiliate[i], "data":data[i], "color":color[i], "stacking": "normal", "stack": 0, "animation": ganimation};
617        } else if (gtype == GRAPH_TYPE_BAR_STACK_HIGHCHART) {
618            // 積み上げ(縦)
619            // invertedをtrue, 系列ごとに色を設定、stacking optionを"normal"に設定
620            inverted_local = true;
621            type_local = GRAPH_TYPE_BAR_HIGHCHART;
622            json_data[i] ={"name":affiliate[i], "data":data[i], "color":color[i], "stacking": "normal", "stack": 0, "animation": ganimation};
623        } else if (gtype == GRAPH_TYPE_COMPLEX_HIGHCHART) {
624            // 複合グラフ
625            // irbridge仕様を踏襲し、データ系列の上半分を折れ線グラフ、下半分を棒グラフとする。
626            // 割り切れない場合は、棒グラフを表示する。
627            // 軸は、折れ線グラフが左、棒グラフが右軸に割りつく
628            // 折れ線を前面に描画するため、棒グラフから先に配列に
628設定していく。
629            if( i < (gtablerow/2) ) {
630                type_local = GRAPH_TYPE_COLUMN_HIGHCHART;
631                var tooltip = {"valueSuffix":rightunittext_axis};
632
633                json_data[gtablerow-1-i] ={"name":affiliate[gtablerow-1-i], "data":data[gtablerow-1-i], "color":color[gtablerow-1-i], "type": type_local, "tooltip":tooltip, "animation": ganimation, "yAxis": rightAxisID, "zIndex": 1};
634            } else {
635                type_local = GRAPH_TYPE_LINE_HIGHCHART;
636                var tooltip = {"valueSuffix":leftunittext_axis};
637                json_data[gtablerow-1-i] ={"name":affiliate[gtablerow-1-i], "data":data[gtablerow-1-i], "color":color[gtablerow-1-i], "type": type_local, "tooltip":tooltip, "animation": ganimation, "yAxis" : leftAxisID, "zIndex": 2};
638            }
639        } else if (gtype == GRAPH_TYPE_COMPLEX_HIGHCHART_TYPE2) {
640            // 複合グラフ type2
641            // データ系列の上半分を棒グラフ、下半分を折れ線グラフとする。
642            // 割り切れない場合は、折れ線グラフを表示する。
643        	// 軸は、棒グラフが左、折れ線グラフが右軸に割りつく
644            if( i+1 > Math.ceil(gtablerow/2) ) {
645                type_local = GRAPH_TYPE_COLUMN_HIGHCHART;
646                var tooltip = {"valueSuffix":leftunittext_axis};
647
648                json_data[gtablerow-1-i] ={"name":affiliate[gtablerow-1-i], "data":data[gtablerow-1-i], "color":color[gtablerow-1-i], "type": type_local, "tooltip":tooltip, "animation": ganimation, "yAxis": leftAxisID, "zIndex": 1};
649            } else {
650                type_local = GRAPH_TYPE_LINE_HIGHCHART;
651                var tooltip = {"valueSuffix":rightunittext_axis};
652                json_data[gtablerow-1-i] ={"name":affiliate[gtablerow-1-i], "data":data[gtablerow-1-i], "color":color[gtablerow-1-i], "type": type_local, "tooltip":tooltip, "animation": ganimation, "yAxis" : rightAxisID, "zIndex": 2};
653            }
654        } else if(gtype == GRAPH_TYPE_COLUMN_QUARTER_HIGHCHART) {
655        	// 2018年追加
656        	// 棒グラフ(四半期)
657            type_local = GRAPH_TYPE_COLUMN_HIGHCHART;
658
659            var series_data = [];
660            for(var j=0; j<gtablecolumn; j++) {
661            	if (label[j]) {
662            		// 値が存在する場合に改行を読み替え
663            	label[j] =label[j].replace(/\n/g,"<br>");
664            	}
665                // データごとに色を設定する
666                if(j == gtablecolumn - 1) {
667                    series_data[j] = {"name":label[j], "y":data[i][j],"color":color[i+4]};
668                } else {
669                    series_data[j] = {"name":label[j], "y":data[i][j],"color":color[i]};
670                }
671            }
672            var seriesId = teaserCount + "-" + (i+1);
673
674            json_data[i] ={"name":affiliate[i], "data":series_data, "color":color[i], "animation": ganimation, "id":seriesId};
675//            json_data[i] ={"name":affiliate[i], "data":series_data, "color":column_quarter_colors[i], "animation": ganimation};
676
677        } else if(gtype == GRAPH_TYPE_LINE_QUARTER_HIGHCHART) {
678        	// 2018年追加
679        	// 折れ線グラフ(四半期)
680            type_local = GRAPH_TYPE_LINE_HIGHCHART;
681
682            var series_data = [];
683            for(var j=0; j<gtablecolumn; j++) {
684            	if (label[j]) {
685            		// 値が存在する場合に改行を読み替え
686            	label[j] =label[j].replace(/\n/g,"<br>");
687            	}
688                // データごとに色を設定する
689                if(j == gtablecolumn - 1) {
690                    series_data[j] = {"name":label[j], "y":data[i][j],"color":color[i+4]};
691                } else {
692                    series_data[j] = {"name":label[j], "y":data[i][j],"color":color[i]};
693                }
694            }
695            var seriesId = teaserCount + "-" + (i+1);
696
697            json_data[i] ={"name":affiliate[i], "data":series_data, "color":color[i], "animation": ganimation, "id":seriesId};
698//            json_data[i] ={"name":affiliate[i], "data":series_data, "color":column_quarter_colors[i], "animation": ganimation};
699
700        } else if(gtype == GRAPH_TYPE_HAITOU_HIGHCHART) {
701        	// 2018年追加
702        	// 配当金
703
704    		// labelの改行読み替え
705        	if (i==0) {
706            	for(var j=0; j<data[i].length ; j++) {
707                	if (label[j]) {
708                		// 値が存在する場合に改行を読み替え
709            		label[j] =label[j].replace(/\n/g,"<br>");
710                	}
711            	}
712        	}
713
714            if( i < gtablerow - 1) {
715            	type_local = GRAPH_TYPE_COLUMN_HIGHCHART;
716
717            	// 予想年(最後の列)の各期の配当金を加算
718            	var tmp = data[i];
719            	var tmpData = tmp[tmp.length-1];
720            	haitou = haitou + tmpData;
721            	tmp[tmp.length-1] = null;
722
723            	// 各期の配当がすべて0かどうか判断
724            	var hasValue = false;
725            	for (var j=0; j<data[i].length; j++) {
726            		if (data[i][j] > 0) {
727            			hasValue = true;
728            		}
729            	}
730
731            	var tooltip = {"valueSuffix":rightunittext_axis, "shared": true};
732            	//label[i] =label[i].replace(/\n/g,"<br>");
733                json_data[i] ={"name":affiliate[i], "data":data[i], "type": type_local,"color":color[i], "stacking": "normal", "stack": 0, "tooltip":tooltip, "animation": ganimation, "yAxis": leftAxisID, "zIndex": 1, "visible": hasValue};
734
735            } else {  // 配当性向
736                type_local = GRAPH_TYPE_LINE_HIGHCHART;
737                var tooltip = {"valueSuffix":leftunittext_axis, "shared": true};
738                // 配当性向
739                json_data[i + 1] ={"name":affiliate[i], "data":data[i], "type": type_local,"color":color[i + 1], "tooltip":tooltip, "animation": ganimation, "yAxis" : rightAxisID, "zIndex": 2};
740
741                // 予想
742            	var series_data = [];
743            	for(var j=0; j<data[i].length ; j++) {
744            		if (j==data[i].length-1) {
745            			series_data[j] = {"y":haitou};
746            		} else {
747            			series_data[j] = {"y":null};
748            		}
749            	}
750//            	label[i] =label[i].replace(/\n/g,"<br>");
751//            	label[i+1] =label[i+1].replace(/\n/g,"<br>");
752//                json_data[i] ={"name":'配当予想', "data":series_data, "type": GRAPH_TYPE_COLUMN_HIGHCHART,"color":color[i], "stacking": "normal", "stack": 0, "tooltip":tooltip, "animation": ganimation, "yAxis" : rightAxisID, "zIndex": 1};
753                json_data[i] ={"name":'配当予想', "data":series_data, "type": GRAPH_TYPE_COLUMN_HIGHCHART,"color":color[i], "stacking": "normal", "stack": 0, "tooltip":tooltip, "animation": ganimation, "yAxis" : leftAxisID, "zIndex": 1};
754            }
755        } else {
756            // その他のグラフ種別
757            json_data[i] ={"name":affiliate[i], "data":data[i], "color":color[i], "animation": ganimation};
758        }
759    }
760
761    // ■tooltip データを生成
762    if(gtype == GRAPH_TYPE_COMPLEX_HIGHCHART || gtype == GRAPH_TYPE_COMPLEX_HIGHCHART_TYPE2) {
763        //複合グラフは、ツールチップに2つのデータを描画
764        json_tooltip={"shared": true};
765    } else if(gtype == GRAPH_TYPE_COLUMN_QUARTER_HIGHCHART || gtype == GRAPH_TYPE_LINE_QUARTER_HIGHCHART) {
766    	//先にセットした値を使用する。
767    } else {
768        //ツールチップ内に系列名、値、単位を描画
769        // 小数は丸めないで出力する。3桁区切りのセパレータ(カンマ)はテーマファイル内で設定する。
770        json_tooltip={"pointFormat": "{series.name}: <b>{point.y} " + tooltip_unitlabel + "</b>"};
771    }
772
773    // ■グラフ生成
774
775    if(gtype == GRAPH_TYPE_HAITOU_HIGHCHART) {
776    	// 配当金
777    	Highcharts.theme = theme_haitou;
778        Highcharts.setOptions(theme_haitou);
779
780    	chart = jQuery('#'+id).highcharts({
781    		//クレジットを非表示
782    		credits: {
783    			enabled: false
784    		},
785    		title: { text: gtitle},
786    		chart: {
787    			// 最大値、最小値の有効/無効指定
788    			alignTicks:alignTicks,
789    			// グラフの縦、横指定
790    			inverted: inverted_local,
791    			// アニメーションの有効/無効
792    			animation: ganimation,
793    			// グラフの大きさ
794    			width: gwidth,
795    			height: gheight,
796    			// グラフ種別
797    			type: type_local,
798    			// グラフ背景色
799    			plotBackgroundColor: gbackcolor
800    		},
801    		legend: {
802    			// 系列表示の有効/無効
803    			enabled: glegend
804    		},
805    		xAxis: {
806    			// X時ラベル
807    			categories: label
808    		},
809    		// Y軸情報設定
810    		yAxis: json_Axis,
811
812    		// tooltip情報設定
813            tooltip: {
814                formatter: function () {
815                      var header = this.series.name;
816                      var s = '<b>' + header + '</b>';
817                      var decimal = 2;
818                      if (header == '配当性向') {
819                          decimal = 1;
820                      }
821                      var value = String(this.y.toFixed(decimal)).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
822                      s += '<br/>' + value;
823                      return s;
824                  }
825              },
826
827    		// グラフデータ設定
828    		series : json_data,
829    		// グラフ右上の外部出力ボタン設定
830    		exporting: {
831    			enabled: true
832    		},
833    		navigation: {
834    			buttonOptions: {
835    				enabled: true,
836    				y: -10
837    			}
838    		}
839    	});
840    } else if(gtype == GRAPH_TYPE_COLUMN_QUARTER_HIGHCHART) {
841    	// 棒グラフ(四半期)
842    	Highcharts.theme = theme_column_quarter;
843        Highcharts.setOptions(theme_column_quarter);
844
845    	chart = jQuery('#'+id).highcharts({
846    		//クレジットを非表示
847    		credits: {
848    			enabled: false
849    		},
850    		title: { text: gtitle},
851    		chart: {
852    			// 最大値、最小値の有効/無効指定
853    			alignTicks:alignTicks,
854    			// グラフの縦、横指定
855    			inverted: inverted_local,
856    			// アニメーションの有効/無効
857    			animation: ganimation,
858    			// グラフの大きさ
859    			width: gwidth,
860    			height: gheight,
861    			// グラフ種別
862    			type: type_local,
863    			// グラフ背景色
864    			plotBackgroundColor: gbackcolor
865    		},
866    		xAxis: {
867    			// X時ラベル
868    			categories: label
869    		},
870    		// Y軸情報設定
871    		yAxis: json_Axis,
872
873    		// tooltip情報設定
874            tooltip: {
875                formatter: function () {
876                      var header = this.series.name;
877
878                      var s = '<b>' + header + '</b>';
879                      var value = String(this.y.toFixed(0)).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
880                      s += '<br/>' + this.x.replace("<br>","") + ': ' +  value;
881                      return s;
882                  }
883              },
884
885    		// グラフデータ設定
886    		series : json_data,
887    		// グラフ右上の外部出力ボタン設定
888    		exporting: {
889    			enabled: true
890    		},
891    		navigation: {
892    			buttonOptions: {
893    				enabled: true,
894    				y: -10
895    			}
896    		}
897    	});
898        tickAmount('#'+id);
899        m_setLegend('#'+id, teaserCount, m_series1LatestColor, m_series2LatestColor, m_series3LatestColor, m_series4LatestColor);
900    } else if(gtype == GRAPH_TYPE_LINE_QUARTER_HIGHCHART) {
901    	// 折れ線グラフ(四半期)
902    	Highcharts.theme = theme_line_quarter;
903        Highcharts.setOptions(theme_line_quarter);
904
905    	chart = jQuery('#'+id).highcharts({
906    		//クレジットを非表示
907    		credits: {
908    			enabled: false
909    		},
910    		title: { text: gtitle},
911    		chart: {
912    			// 最大値、最小値の有効/無効指定
913    			alignTicks:alignTicks,
914    			// グラフの縦、横指定
915    			inverted: inverted_local,
916    			// アニメーションの有効/無効
917    			animation: ganimation,
918    			// グラフの大きさ
919    			width: gwidth,
920    			height: gheight,
921    			// グラフ種別
922    			type: type_local,
923    			// グラフ背景色
924    			plotBackgroundColor: gbackcolor
925    		},
926    		xAxis: {
927    			// X時ラベル
928    			categories: label
929    		},
930    		// Y軸情報設定
931    		yAxis: json_Axis,
932
933    		// tooltip情報設定
934            tooltip: {
935                formatter: function () {
936                      var header = this.series.name;
937
938                      var s = '<b>' + header + '</b>';
939                      var value = String(this.y.toFixed(0)).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
940                      s += '<br/>' + this.x.replace("<br>","") + ': ' +  value;
941                      return s;
942                  }
943              },
944
945    		// グラフデータ設定
946    		series : json_data,
947    		// グラフ右上の外部出力ボタン設定
948    		exporting: {
949    			enabled: true
950    		},
951    		navigation: {
952    			buttonOptions: {
953    				enabled: true,
954    				y: -10
955    			}
956    		}
957    	});
958        tickAmount('#'+id);
959        m_setLegend('#'+id, teaserCount, m_series1LatestColor, m_series2LatestColor, m_series3LatestColor, m_series4LatestColor);
960    } else {
961    	// 配当金・棒グラフ(四半期)以外
962    	chart = jQuery('#'+id).highcharts({
963    		//クレジットを非表示
964    		credits: {
965    			enabled: false
966    		},
967    		title: { text: gtitle},
968    		chart: {
969    			// 最大値、最小値の有効/無効指定
970    			alignTicks:alignTicks,
971    			// グラフの縦、横指定
972    			inverted: inverted_local,
973    			// アニメーションの有効/無効
974    			animation: ganimation,
975    			// グラフの大きさ
976    			width: gwidth,
977    			height: gheight,
978    			// グラフ種別
979    			type: type_local,
980    			// グラフ背景色
981    			plotBackgroundColor: gbackcolor
982    		},
983    		legend: {
984    			// 系列表示の有効/無効
985    			enabled: glegend
986    		},
987    		xAxis: {
988    			// X時ラベル
989    			categories: label
990    		},
991    		// Y軸情報設定
992    		yAxis: json_Axis,
993
994    		// tooltip情報設定
995    		tooltip:json_tooltip,
996    		plotOptions: {
997    			pie: {
998    				// 円グラフ時に系列表示の有効/無効設定
999    				showInLegend: glegend,
1000/*
1001    				dataLabels: {
1002    					formatter: function() {
1003    						var split = String(this.y).split(".");
1004    						if (split.length == 1) {
1005    							return split[0].replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
1006    						} else {
1007    							return split[0].replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') + "." + split[1];
1008    						}
1009    					}
1010    				},
1011*/
1012    				// 円グラフの色設定
1013    				color: color
1014    			},
1015    		},
1016    		// グラフデータ設定
1017    		series : json_data,
1018    		// グラフ右上の外部出力ボタン設定
1019    		exporting: {
1020    			enabled: true
1021    		},
1022    		navigation: {
1023    			buttonOptions: {
1024    				enabled: true,
1025    				y: -10
1026    			}
1027    		}
1028    	});
1029    }
1030
1031}
1032

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.