ChartAnimation.Enabled オプションが true のとき、アニメーション効果を棒グラフの系列に適用できます。アニメーション化されたスライド状態／フェード状態の間に遷移効果を追加すれば、それらの状態間にシームレスな流れが生まれ、棒グラフの魅力を高めることができます。ロード時に左から右へスムーズに移動する棒グラフ系列の代わりに、棒グラフを系列のスライドイン時にバウンドインさせ、系列のスライドアウト時にバウンドアウトさせることができます。デフォルトでは、ChartAnimation.Easing オプションは EaseLinear に設定され、棒グラフをリロードすると、各系列はスムーズな直線的遷移効果でロードされます。
以下の遷移効果は、状態間の遷移をアニメーション化するために使用できます。これにより、棒グラフ系列をロードする際にユーザーにとって動きがスムーズに見えます。
| 遷移の名前 | 遷移の説明 |
|---|---|
| EaseInBack | バックのイージングイン。開始は遅く、それから加速します。 |
| EaseInCubic | ３次型のイージングイン。開始は速度ゼロで、それから加速します。 |
| EaseInOutCubic | ３次型のイージングインとイージングアウト。開始は速度ゼロで、途中まで加速し、それから再び速度ゼロまで減速します。 |
| EaseOutBack | バックのイージングアウト。開始は速く、それから減速します。 |
| EaseOutBounce | バウンドしながらのイージングアウト。開始は速く、それから減速します。バウンドの回数は持続時間に関係します。持続時間が延びれば、バウンドの回数は多くなります。 |
| EaseOutCubic | ３次型のイージングインとイージングアウト。開始は全速で、それからゼロまで減速します。 |
| EaseOutElastic | ５次型のイージングアウト。開始は全速で、それからゼロまで減速します。 |
C1BarChart のアニメーション効果の長さは、ChartAnimation.Durationオプションを使用して設定できます。アニメーション効果の持続時間の指定に使用される時間の単位はミリ秒であり、Duration プロパティのデフォルト設定値は 500 ミリ秒（0.5 秒）です。アニメーション効果を長くするにはこの値を増加させ、短くするにはこの値を減少させます。
以下のリンクは、C1BarChart 上でさまざまなアニメーション効果を使用する方法を示します。
アニメーションのサンプルコード
| ソースビュー |
コードのコピー
|
|---|---|
<cc1:C1BarChart ID="C1BarChart1" runat="server">
</cc1:C1BarChart>
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijbarchart").wijbarchart({
axis: {
y: {
text: "ヒット数",
autoMax: false,
max: 100,
autoMin: false,
min: 0
},
x: {
text: "年月"
}
},
hint: {
content: function () {
return this.data.label + '<\n> ' + this.y + '';
}
},
stacked: true,
clusterRadius: 5,
seriesList: [createRandomSeriesList("2010")]
});
});
function changeProperties() {
var animation = {};
enabled = $("#chkEnabled").is(":checked"),
duration = $("#inpDuration").val(),
easing = $("#selEasing").val();
animation.enabled = enabled;
if (duration && duration.length) {
animation.duration = parseFloat(duration);
}
animation.easing = easing;
$("#wijbarchart").wijbarchart({("option", "animation", animation);
}
function reload() {
$("#wijbarchart").wijbarchart({("option", "seriesList", [createRandomSeriesList("2010")]);
}
function createRandomSeriesList(label) {
var data = [],
randomDataValuesCount = 12,
labels = ["1月", "2月", "3月", "4月", "5月", "6月",
"7月", "8月", "9月", "10月", "11月", "12月"],
idx;
for (idx = 0; idx < randomDataValuesCount; idx++) {
data.push(createRandomValue());
}
return {
label: label,
legendEntry: false,
data: { x: labels, y: data }
};
}
function createRandomValue() {
var val = Math.round(Math.random() * 100);
return val;
}
</script>
}
<h2>アニメーション</h2>
<div class="main demo">
<!-- デモ マークアップの開始 -->
<input type="button" value="リロード" onclick="reload()" />
<div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 600px;
height: 475px">
</div>
<!-- デモ マークアップの終了 -->
<div class="demo-options">
<!-- オプション マークアップの開始 -->
<div>
<label for="chkEnabled">
Animation Settings: Enabled
</label>
<input id="chkEnabled" type="checkbox" checked="checked" />
<label for="inpDuration">
Duration
</label>
<input id="inpDuration" type="text" value="1000" />
<label for="selEasing">
Easing
</label>
<select id="selEasing">
<option value=">">></option>
<option value="<"><</option>
<option value="<>"><></option>
<option value="backIn">backIn</option>
<option value="backOut">backOut</option>
<option value="bounce">bounce</option>
<option value="elastic">elastic</option>
</select>
<input type="button" value="適用" onclick="changeProperties()" />
</div>
<!-- オプション マークアップの終了 -->
</div>
</div>
|
|
関連トピック