よくある質問   FAQ
よく寄せられる、質問と回答をまとめました。

棒グラフ上で棒の幅はどのように設定できますか?

[img1]

棒グラフの棒の幅を変更たい場合、次の2つの属性を設定してください。

1.columnWidthRatio:

全体の棒の幅をグラフの大きさ対する比率で設定します。

有効な値の範囲は0~1です。もし値が1と設定されれば、横幅一杯の棒が描かれて、値が0.5だったら、幅の半分の棒が描かれます。(0.5と設定された場合、全体のグラフの幅が400pxで、描かなければならない棒が5本なら、一本の棒は40pxの幅で描かれます。)

2.maxColumnWdith:

棒の幅をピクセルで設定します。

2つの値が同時に設定されている場合、実際の棒の幅は、columnWidthRatio値と、maxColumnWidth値の中で小さい方が適用されます。例えば、「columnWidthRatio=0.1」、「maxColumnWidth=100」と指定され、描く棒が5本、そして全体面積が400pxの場合は、columnWidthRatio値が適用されて棒の幅は8pxの棒グラフが描かれます。

Dual Y軸(Y軸が左右に1つずつ存在)は、どのように設定しますか?

[img2]

 <series> タグの外に定義された<horizontalAxis>タグと<verticalAxis>タグは、すべてのシリーズによって参照されます。 もし<horizontalAxis>タグあるいは<verticalAxis> タグが<series> タグの中に定義されれば、定義されたシリーズ内だけに参照されます。

Dual Y軸を生成するためには、すべてのシリーズに適用される<verticalAxis> タグを、<series> タグの外に定義して、もう1つの<verticalAxis> タグを<series> タグの中に定義します。その時、各<verticalAxis>タグのIDはそれぞれ違う値にしなければなりません。そして、各<verticalAxis>のための2つの<Axis2DRenderer>タグを、<verticalAxisRenderers> タグの中に定義する必要があり、その際は<verticalAxis> タグに定義されたIDを“axis”属性として設定しなければなりません。

下記の例は、冒頭の画像と同じグラフを生成するレイアウトです。2つの<verticalAxis> タグが定義されており、それぞれのIDは「axis1」と「axis2」です。

<KoolChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">
	<Options>
		<Caption text="Anual Report"/>
		<SubCaption text="2008"/>
	</Options>
	<Combination2DChart showDataTips="true">
		<horizontalAxis>
			<CategoryAxis categoryField="Month"/> 
		</horizontalAxis>
		<verticalAxis>
			<LinearAxis id="axis1"/> 
		</verticalAxis>
		<series>
			<Column2DSet type="stacked">
				<series>
					<Column2DSeries yField="Profit" displayName="Profit">
						<showDataEffect>
							<SeriesInterpolate/> 
						</showDataEffect>
						<fill>
							<SolidColor color="0x66CC66"/> 
						</fill>
					</Column2DSeries>
					<Column2DSeries yField="Cost" displayName="Cost">
						<showDataEffect>
							<SeriesInterpolate/> 
						</showDataEffect>
						<fill>
							<SolidColor color="0x0099FF"/> 
						</fill>
					</Column2DSeries>
				</series>
			</Column2DSet>
			<Line2DSeries yField="Revenue" displayName="Revenue">
				<verticalAxis>
					<LinearAxis id="axis2"/> 
				</verticalAxis>
				<showDataEffect>
					<SeriesInterpolate/> 
				</showDataEffect>
				<filters>
					<DropShadowFilter distance="3" color="0x666666" alpha=".8"/> 
				</filters>
				<lineStroke>
					<Stroke color="0xFFCC00" weight="4"/> 
				</lineStroke>
			</Line2DSeries>
		</series>
		<verticalAxisRenderers> 
			<Axis2DRenderer axis="{axis1}"/> 
			<Axis2DRenderer axis="{axis2}"/> 
		</verticalAxisRenderers>
	</Combination2DChart>
</KoolChart>

グラフの色やスタイルの変更は可能ですか?パイグラフ(2D)の基本色を変更したいですが。

[img3]

可能です。 グラフの色は<fill>タグと<fills> タグを利用してグラフをデザインする際に指定できて、シリーズの値による動的な色指定の場合は「fillJsFunction」属性を利用することもできます。

<fill> タグはシリーズのすべての値に対して1つの色を指定するのに使われて、<fills> タグはシリーズの値に対して違う色を指定する場合に使われます。もし<fills> タグに指定された色の数がシリーズのデータの数より少ない場合は、<fills> タグに定義された色が繰り返して使われます。例えば、<fills> タグに6つの色が定義されていて、seriesのデータ数が12個の場合は、1~6個は指定の6つの色が、7~12個は6つの色がもう一度使われます。

「fillJsFunction」はシリーズの属性です。 もしシリーズデータの値によって色を動的に変えたい場合はこの属性を利用してください。(例:fillJsFunction="fillJsFunction")関数には、シリーズデータの値によって指定される色を選択するロジックを実装してください。以下は、関数の例です。

function fillJsFunction(seriesId, index, data, values)
{
	if(values[1] > 2000)
		return "0xFF3366";
	else if(values[1] > 1000)
		return "0xFFFF33";
	else
		return "0xFF9999";	
}

*詳しくはパッケージ内のサンプルの中のChart Sampleの「Colors」部分を参照して下さい。

イベント処理の関数を設定できますか? グラフ生成が完了した後に特定のスクリプトを実行したいです。

[img4]

できます。「displayCompleteCallFunction」属性を使ってグラフの生成が完了した後に、ご指定のスクリプトを実行することができます。実行したい関数の名前を、次のように「displayCompleteCallFunction」属性の値に設定して下さい。(例:displayCompleteCallFunction="displayCallFunction")以下はその例です。

function displayCallFunction()
{
	alert("KoolChart rendering is complete. !!");
}

棒グラフに1,000個を越えるデータを表示したいです。どのようにすればいいですか?

[img5]

KoolChartはスクロール機能を提供します。シリーズのデータ数が多すぎる場合、スクロールバーを利用して下さい。グラフにスクロールバーを付ける場合、<ScrollableAxisRenderer> タグを<horizontalAxisRenderers> タグ (横棒グラフの場合は < verticalAxisRenderers> タグ)の子ノードに定義して下さい。次はその例です。

<KoolChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">
	<Options>
		<Caption text="Large Amounts of Data (1,000 items) - Scroll Chart"/>
	</Options>
	<Column2DChart showDataTips="true" gutterRight="10">
		<horizontalAxis>
			<CategoryLinearAxis id="hAxis" categoryField="index"/>
		</horizontalAxis>
		<series>
			<Column2DSeries yField="Profit" displayName="Profit"/>
		</series>
		<horizontalAxisRenderers>
			<ScrollableAxisRenderer axis="{hAxis}" visibleItemSize="50"/>
		</horizontalAxisRenderers>
	</Column2DChart>
</KoolChart>

1つのウェブページに、複数のグラフを生成するにはどうすればいいですか?

[img6]

1つのウェブページに、複数のグラフを生成することもできます。 この際に、レイアウトとデータは複数のグラフで共有することができるが、KoolChart生成の準備が完了した状態で処理されるハンドラーは、各グラフ別に作らなければなりません。

1.KoolChart生成の準備が完了した後実行されるハンドラー関数を次のように定義します。

var chartVars = "KoolOnLoadCallFunction=chartReadyHandler";
var chartVars2 = "KoolOnLoadCallFunction=chartReadyHandler2";

2.グラフID、<div>タグのID、1で定義した変数名をパラメータで、次のようにグラフを生成します。

KoolChart.create("chart1", "chartHolder", chartVars, "100%", "100%"); 
KoolChart.create("chart2", "chartHolder2", chartVars2, "100%", "100%");

3.KoolChart生成の準備が完了した後実行されるハンドラー関数を、次のように実装します。

function chartReadyHandler(id) {
	document.getElementById(id).setLayout(layoutStr);
	document.getElementById(id).setData(chartData);
}
function chartReadyHandler2(id) {
	document.getElementById(id).setLayout(layoutStr2);
	document.getElementById(id).setData(chartData2);
}

4.最後にHTMLソース内に、各グラフのための<div>空間を用意します。

<div class="content">
<div id="chartHolder" style="position:absolute; width:400px; height:400px;"></div>
	<div id="chartHolder2" style="position:absolute; right:0; width:400px; height:400px;"></div>
</div>

マウスイベントが発生した時、ユーザー定義関数を実行することができますか?

[img7]

はい。KoolChartはマウスクリックイベント処理のために「itemClickJsFunction」属性と、マウスオーバーイベント処理のために「dataTipJsFunction」属性を提供しております。

もし「itemClickJsFunction」属性値に関数名を定義して、利用者がグラフ内に特定アイテムをクリックすると、該当関数が実行されます。その時、シリーズのID、クリックされたアイテムのツールチップテキスト、インデックス、そしてその値が関数のinputパラメータへ渡されます。次はitemClickJsFunctionの実装例です。

function chartItemClickHandler(seriesId, displayText, index, data, values)
{
	alert(
		"seriesId:"+seriesId+"\n” +
		“displayText:"+displayText+"\n” + 
		“index:"+index+"\n” + 
		“data:"+data+"\n” + 
		“values:"+values
	);
}

グラフ内に注釈やコメントを挿入することはできますか?

[img8]

はい。 グラフ内にノート挿入したい場合は、<CanvasElement> タグを<annotationElements> タグの子ノードとして追加してください。 <CanvasElement> タグの中に、テキストの内容、フォントの大きさ、色、位置、背景の色と透明度などを指定することができます。以下は<CanvasElement> タグを<annotationElements> タグの子ノードとして定義したレイアウトの一部です。

<annotationElements>
	<CanvasElement>
		<Label right="0" textAlign="center" text="Text Size Example" fontFamily="dotum" textDecoration="underline" backgroundColor="0x9d4c64" fontSize="17" backgroundAlpha="0"/>
		<Label width="150" top="150" right="20" textAlign="center" text="Text Color Example" cornerRadius="10" fontSize="11" color="0xff0000" borderColor="0x0000ff" backgroundColor="0xf5d6fc"/>
		<Label width="200" height="60" top="230" right="20" textAlign="center" text="The example of&#xa;the color and size." fontSize="20" color="0xffffff" fontWeight="bold" borderColor="0xcd5c5c" borderThickness="2" borderStyle="solid" backgroundColor="0xf08080" backgroundAlpha="1">
		</Label>
	</CanvasElement>
</annotationElements>

■各属性の意味

/* left: the marginal space from the left end of the chart. */
グラフの左端からの余白
/* right: the marginal space from the right end of the chart. */
グラフの右端からの余白
/* top: the marginal space from the top of the chart. */
グラフの上端からの余白
/* bottom: the marginal space from the bottom of the chart. */
グラフの下端からの余白
/* color: the color of characters. */
文字色
/* cornerRadius: the roundness of the border of the memo box. */
メモボックスの角丸
/* fontFamily: the font name. */
フォント名
/* fontSize: the font size. */
文字サイズ
/* fontWeight: normal, bold */
文字の太さ
/* backgroundAlpha: the transparency of the background. */
背景の透明度
/* backgroundColor: the color of the background. */
背景色
/* borderAlpha: the transparency of the border. */
境界線の透明度
/* borderColor: the color of the border. */
境界線の色
/* borderThickness: the thickness of the border. */
境界線の太さ
/* textAlign: text alignment. left, center, right */
配置(左寄せ、中央揃え、右寄せ)
/* styleName: the style name. */
スタイル名
/* line feed: &#xa; */
ラインフィード

グラフの特定領域を拡大(ズームイン)したいです。どうすればいいですか?

[img9]

グラフの拡大・縮小(ズームイン/ズームアウト)機能を利用したい場合、<CrossRangeZoomer> タグを<annotationElements> タグの子ノードとして定義して下さい。グラフが生成された後、拡大したい領域をドラッグしてマウスボタンから指を離すと、拡大のためのポップアップメニューが現れます。以下は<CrossRangeZoomer > タグを<annotationElements> タグの子ノードとして定義したレイアウトの一例です。

<annotationElements>
	<CrossRangeZoomer zoomType="horizontal" horizontalLabelFormatter="{numFmt}"	enableZooming="true" enableCrossHair="true"/>
</annotationElements>

■各属性の意味

/* zoomType:the axes for zoom if enableZooming=true. (horizontal,vertical,both) */
拡大・縮小する軸を設定
/* horizontalLabelFormatter:the formatter for the label of the horizontal line of crosshairs. */
Crosshairs線の水平座標値に表示されるレーベルテキストのフォーマッター 
/* verticalLabelFormatter: the formatter for the label of the vertical line of crosshairs. */
Crosshairs線の垂直座標値に表示されるレーベルテキストのフォーマッター
/* enableZooming: whether or not to use the zoom feature. */
拡大・縮小機能を提供するか否か
/* enableCrossHair: whether or not to use the crosshairs feature. */
Crosshairs機能を利用するか否か
/* useDualCrossXLabel: whether or not to display two axes labels if more than two vertical axes are defined. */
2つ以上の垂直軸が定義された場合、2つのレーベルを表示するか否か
/* useDualCrossYLabel: whether or not to display two axes labels if more than two horizontal axes are defined. */
2つ以上の水平軸が定義された場合、2つのレーベルを表示するか否か
/* verticalLabelPlacement : the position for the label of the vertical line of crosshairs. (: top, bottom) */
/* horizontalLabelPlacement: the position for the label of the horizontal line of crosshairs. (left, right) */

グラフの背景に、ユーザ指定の画像を設定することはできますか?

[img10]

可能です。 ユーザー定義の背景を指定したい場合、<backgroundElements>タグを利用してください。<backgroundElements> タグを利用して、背景にに表示されるグリッド線の方向や色などを指定することができ、特定の画像を指定することもできます。もし「backgroundAlpha」属性を透明に設定すると、上記の例のようなグラフを生成できます。

以下は「backgroundAlpha」属性を透明に設定した一例です。

<KoolChart  backgroundAlpha="0.1" cornerRadius="12" borderStyle="none">

以下は<backgroundElements> タグを定義したレイアウトの一例です

<backgroundElements>
	<GridLines direction="horizontal" horizontalChangeCount="1">
		<horizontalStroke>
			<Stroke color="0x999999" alpha="0.5" weight="1"/>
		</horizontalStroke> 
		<horizontalFill>
			<SolidColor color="0xEEEEFF" alpha="0.5"/>
		</horizontalFill> 
		<horizontalAlternateFill>
			<SolidColor color="0xFFFFCC" alpha="0.5"/>
		</horizontalAlternateFill>
	</GridLines>
</backgroundElements>

サンプルと同じ方法でリアルタイムグラフを生成してみましたが、うまくいきません。どうすればいいですか?

[img11]

KoolChartはXMLHTTPRequest機能を利用してリアルタイムでグラフのデータを遠隔サーバーから持ってきます。但し、XMLHTTPRequest機能は異なるドメイン(cross-domain)からのリクエストには対応しておりませんので、「baseURL」属性値はご使用のウェブサーバーのドメイン名と同じものでなければなりません。

サンプルのソースに記載されている「baseURL」属性をそのまま使わずに、ご利用のウェブサーバーと同じドメイン名に設定してください。異なるドメイン(cross-domain)からのリクエストの対応は次期バージョンで実装する予定です。