<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root
	xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:og="hybs-taglib.tld"
	version="2.0">
<jsp:directive.page language="java" contentType="text/html; charset=UTF-8" />

<og:head headType="result" useChartJS="true" />
<jsp:directive.include file="/jsp/custom/result_info.jsp" />

<!-- ﾁｬｰﾄ情報の取得 -->
<og:query>
	SELECT	 ENAME as LABELS
			,SAL   as VAL1
			,COMM  as VAL2
			,COMM * 1.5 as VAL3
	FROM BONUS
	order by 1
</og:query>

<og:jsChart
	chartType		= "bar"
	height			= "{@height}"
	width			= "{@width}"
	minLabelWidth	= "{@minLabelWidth}"
	labelColumn		= "LABELS"
	optOptions		= "interaction:{mode:'index'}"
	debug			= "{@debug}"
>
	<og:jsChartData
		chartColumn		= "VAL1"
		label			= "給料"
		type			= "line"
		borderColor		= "green"
		fontColor		= "green"
		useAxis			= "true"
		beginAtZero		= "true"
		max				= "{@max}"
		min				= "{@min}"
		/>
	<!--
		optOptions属性のyAxisIDと、jsCahrtﾀｸﾞoptOptions属性のidが紐づきます。
		yAxisIDが指定されていない場合は、1つ目の属性が設定されます。
	-->
	<og:jsChartData
		chartColumn		= "VAL2"
		label			= "裁量手当1"
		type			= "bar"
		borderColor		= "blue"
		fontColor		= "blue"
		useAxis			= "true"
		position		= "right"
		optGrid			= "borderDash:[5,2]"
	/>
	<og:jsChartData
		chartColumn		= "VAL3"
		label			= "裁量手当2"
		type			= "bar"
		borderColor		= "red"
		fontColor		= "red"
		useAxis			= "true"
		position		= "right"
		gridColor		= "rgba(256,0,0,0.2)"
	/>
</og:jsChart>

<br/><pre>
optOptions属性にscales項目を設定すると、
jsChartﾀｸﾞのmax,min,0ｽﾀｰﾄ(beginAtZero）がﾘｾｯﾄされるため、
optOptions内で再設定する必要があります。

ﾂｰﾙﾁｯﾌﾟに関する設定をoptOptions属性のinteraction項目で実施します。
mode: 'point'(対象ﾎﾟｲﾝﾄのみ)
      'nearest'(一番近いﾎﾟｲﾝﾄ)
      'index'(各ﾃﾞｰﾀｾｯﾄの該当ｲﾝﾃﾞｯｸｽの値) 等
intersect: true はﾏｳｽがﾎﾟｲﾝﾄ上にある時のみ､false は常に表示(ﾃﾞﾌｫﾙﾄはtrue)
</pre>

<ul>
  <li>optOptions="interaction:{mode:'index'}"</li>
</ul>

<jsp:directive.include file="/jsp/common/htmlend.jsp" />
</jsp:root>
