Wijmo UI for the Web
ツールチップアニメーションのカスタマイズ
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > BubbleChart > 操作手順 > ツールチップアニメーションのカスタマイズ |
それには、２つの方法があります。古い方法では、Raphael.fn.tooltip.animations を使用してアニメーション動作を拡張します。新しい方法は Wijmo 2013 でのみ使用でき、wijmo.ChartTooltip.animations を使用します。
 |
メモ：ヒントオプションの animated 属性のデフォルト値は "fade" です。他の値を使用する場合は、カスタムアニメーションを作成する必要があります。hideAnimated 属性と showAnimated 属性を設定して複数のアニメーションを使用したり、これらを null に設定することで、animated 属性に割り当てた値をデフォルトとして使用することができます。 |
ドロップダウンからコードをコピーします
| ツールチップアニメーションをカスタマイズするスクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ axis: { y: {text: "Number of Products"}, x: {text: "Sales", annoFormatString: "C0"} }, hint: { animated: "scale", hideAnimated: null, showAnimated: null }, 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] } }] }); 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> | |
全て展開
すべて折りたたむ