Wijmo UI for the Web
ツールチップアニメーションのカスタマイズ
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > BarChart > 操作手順 > ツールチップアニメーションのカスタマイズ |
クイックスタートの例を基に、グラフの棒の上にマウスポインタを置いたときに表示される hint のアニメーションをカスタマイズできます。
ツールチップアニメーションをカスタマイズするには、2つの方法があります。Wijmo 2013 のみで利用できる新しい方法は、wijmo.ChartTooltip.animations を使用します。
 |
注意：ヒントオプションのanimated属性のデフォルト値は "fade" です。その他の属性値を使用するには、カスタムアニメーションを作成する必要があります。hideAnimatedおよびshowAnimated属性を設定して各種のアニメーションを使用したり、それらの属性を null に設定して、animated に割り当てる値をデフォルトに設定したりできます。 |
ドロップダウンからコードをコピーします
| ツールチップアニメーションをカスタマイズするスクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijbarchart").wijbarchart({
hint: {
animated: "scale",
hideAnimated: null,
showAnimated: null
},
seriesList: [{
label: "2012 Auto Sales ",
legendEntry: false,
data: {
x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'],
y: [.05, .04, .21, .27, .1, .24]
}
}],
});
wijmo.ChartTooltip.animations.scale = function (options) {
context = options.context,
bBox = context.wijGetBBox(),
w = bBox.width,
h = bBox.height;
if (options.show) {
scaleSet(context, options.duration, options.easing);
} else {
context.wijAnimate({ "transform": "...s0" }, options.duration, options.easing);
}
}
function scaleSet(set, duration, easing) {
$.each(set, function (i, s) {
if (s.type === "set") {
scaleSet(s, duration, easing);
} else {
var transform = s.attr("transform");
s.wijAttr("transform", "...s0");
s.wijAnimate({"transform": transform}, duration, easing);
}
});
}
});
</script>
| |