chart_hint インターフェース

マウスをチャート要素に合わせたときに表示されるツールチップ（ヒント）として使用するオブジェクトを作成します。デフォルトでは、要素の seriesList ラベルと Y データの値が表示されます。カスタム書式が設定されたヒントの内容を作成する方法については、「すべての数値の書式設定」を参照してください。

型: Function

デフォルト値:

{

animated: "fade",

calloutFilled: false,

calloutFilledStyle: {fill: "#000"},

compass:"north",

content:null,

contentStyle: {fill: "#d1d1d1", "font-size": 16},

duration: 120,

easing: "easeOutExpo",

enable: true,

hideAnimated: "fade",

hideDelay: 150,

hideDuration: 120,

hideEasing: "easeOutExpo",

offsetX: 0,

offsetY: 0,

showAnimated: "fade",

showCallout: true,

showDelay: 150,

showDuration: 120,

showEasing: "easeOutExpo",

style: {fill: "270-#333333-#000000", "stroke-width": 2},

title: null,

titleStyle: {fill: "#d1d1d1", "font-size": 16},

}

使用例

以下のコードは、ヒントに以下の設定を適用して下の図のようなチャートを作成します。

seriesList データ系列で提供したラベル値を 1 行目に表示します。
改行を入れます（'\n' で指定されています）。
Y 値の代わりに Y1 値を使用します。
現在のロケールの設定を使用して、Y1 の値を小数点なしのパーセントで書式設定します。

Javascript

<script type="text/javascript">
$(document).ready(function () {
    $("#wijbubblechart").wijbubblechart({
        axis: {
            y: {text: "Number of Products"},
            x: {text: "Sales", annoFormatString: "C0"}
        },
        hint: {
            content: function(){
                return this.data.label + '\n' + 
                Globalize.format(this.y1, "p0") + ' ';
            }
        },
        legend: {visible: false},
        seriesList: [
        {
            label: "Company A Market Share",
            data: { y: [14], x: [12200], y1: [.15] }
        }, {
            label: "Company B Market Share",
            data: { y: [20], x: [60000], y1: [.23] }
        }, {
            label: "Company C Market Share",
            data: { y: [18], x: [24400], y1: [.1] }
        }]
    });
});
</script>

フィールド

	名前	解説
	animated	showAnimated または hideAnimated が指定されていない場合に、ヒントを表示または非表示にするときに使用する効果を示す値。デフォルト値: "fade" 型: String
	calloutFilled	コールアウト（メインのヒントボックスから対象のバブルを指す小さい三角形）を塗りつぶすかどうかを決定します。true に設定した場合、コールアウト三角形の塗りつぶし色として、calloutFilledStyle 属性で指定した色が使用されます。それ以外の場合は、ヒントの style 属性の色が使用されます。デフォルト値: false 型: Boolean
	calloutFilledStyle	コールアウト（メインのヒントボックスから対象のバブルを指す小さい三角形）のレンダリングに使用するスタイルを示す値。コールアウトのこの属性を有効にするには、calloutFilled 属性も true に設定する必要があります。それ以外の場合は、ヒントの style 属性の色が使用されます。使用可能なスタイルパラメーターの詳細については、「スタイルのオプション」トピックを参照してください。デフォルト値: {fill:"#000"} 型: Object
	closeBehavior	ツールチップを閉じる方法を決定します。動作にはautoまたはstickyがあります。
	compass	ヒントボックスに対するコールアウト（メインのヒントボックスから対象のバーを指す小さい三角形）のコンパス位置を示す値。
	content	ツールチップの内容部分に表示される値、または表示されるツールチップの値の取得に使用される関数。デフォルト値:"" 型: String または Function
	contentStyle	ツールチップに表示されるテキストに適用するスタイルオブジェクトを示す値。使用可能なスタイルパラメーターの詳細については、「スタイルのオプション」トピックを参照してください。デフォルト値: {fill: "#d1d1d1","font-size":16} 型: Object
	duration	showDuration 属性または hideDuration 属性が null に設定されている場合に、マウスをバブルに合わせたときにヒントが表示されるのにかかる時間、またはマウスをバブルから離したときにヒントが非表示になるのにかかる時間を示す値（ミリ秒単位）。デフォルト値:120 型: Number
	easing	showEasing 属性または hideEasing 属性が null に設定されている場合に、マウスをバブルに合わせたときにヒントの表示、またはマウスをバブルから離したときにヒントの非表示に使用されるイージングアニメーションを示す値。デフォルト値: "easeOutExpo" 型: String
	enable	ツールチップを表示するかどうかを示す値。
	hideAnimated	ユーザーがバブルからマウスを離したときにヒントの非表示に使用されるアニメーション効果を示す値。これを使用すると、マウスをバブルから離したときにマウスをバブルに合わせたときとは異なる効果を設定できます。デフォルト値: "fade" 型: String
	hideDelay	マウスをチャート要素から離してからヒントが非表示になるまでの時間（ミリ秒単位）を示す値。デフォルト値: 150
	hideDuration	指定されたアニメーション効果によってツールチップが完全に非表示になるのにかかる時間（ミリ秒単位）を示す値。デフォルト値: 120
	hideEasing	ユーザーがチャート要素からマウスを離したときにヒントの非表示に使用されるイージング効果を示す値。デフォルト値: "easeOutExpo"
	isContentHtml	ツールチップを HTML スタイルで使用するかどうかを決定します。
	offsetX	マウスポインタからヒントのコールアウト三角形までの水平距離（ピクセル単位）を示す値。デフォルト値: 0
	offsetY	マウスポインタからヒントのコールアウト三角形までの垂直距離（ピクセル単位）を示す値。デフォルト値: 0
	relativeTo	ツールチップをマウスと要素のどちらに関連付けるかを決定します。
	showAnimated	ユーザーがチャート要素にマウスを合わせたときにヒントの表示に使用されるアニメーション効果を示す値。デフォルト値: "fade"
	showCallout	コールアウト要素（メインのヒントボックスから対象のチャート要素を指す小さい三角形）を表示するかどうかを決定します。デフォルト値: true
	showDelay	マウスをチャート要素に合わせてからヒントが表示されるまでの時間（ミリ秒単位）を示す値。デフォルト値: 150
	showDuration	指定されたアニメーション効果によってツールチップが完全に表示されるのにかかる時間（ミリ秒単位）を示す値。デフォルト値: 120
	showEasing	ユーザーがチャート要素にマウスを合わせたときにヒントの表示に使用されるイージング効果を示す値。デフォルト値: "easeOutExpo"
	style	ヒントの表示に使用される矩形の塗りつぶし色またはグラデーションと輪郭の太さおよび色（ストローク）を示す値。使用可能なスタイルパラメーターの詳細については、「スタイルのオプション」トピックを参照してください。デフォルト値: {fill: "270-#333333-#000000", "stroke-width": "2"}
	title	ヒントの content の上に一列に表示されるテキスト値（またはテキスト値を返す関数）。下の図では、title を "Title" に設定し、titleStyle を {fill: "yellow"} に設定しています。デフォルト値: null
	titleStyle	ヒントタイトルテキストに使用するスタイルを示す値。注: フォールバック textStyle オプションで設定されたスタイルオプションは、このオプションで明示的に設定されていない（つまり、デフォルトで設定された）すべてのスタイルオプションに使用されます。使用可能なスタイルパラメーターの詳細については、「スタイルのオプション」トピックを参照してください。下の図では、title を "Title" に設定し、titleStyle を {fill: "yellow"} に設定しています。デフォルト値: {fill: "#d1d1d1","font-size": 16}

トップ

参照

wijmo.chart 名前空間
 hint オプション