製品版のみの機能
データ チャート - 移行アニメーション (Category)
このサンプルは、チャートの初期化で再生するアニメーション機能を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Transition Animation</title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
</head>
<body>
<script type="text/javascript" src="/data-files/uk-france-population.js"></script>
<script type="text/javascript">
$(function () {
var data = [
{ "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
{ "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
{ "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
{ "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
{ "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
];
$("#chart").igDataChart({
width: "100%",
height: "400px",
legend: { element: "lineLegend" },
title: "国別人口",
subtitle: "1995 年と 2005 年の人口の比較",
dataSource: data,
axes: [
{
name: "NameAxis",
type: "categoryX",
label: "CountryName"
},
{
name: "PopulationAxis",
type: "numericY",
minimumValue: 0,
title: "人口 (百万人単位)",
}
],
series: [
{
name: "2005Population",
type: "line",
title: "2005",
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop2005",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: 5
},
{
name: "1995Population",
type: "line",
title: "1995",
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop1995",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: 5
}
]
});
$("#seriesType").change(function (e) {
redrawChart();
});
var redrawChart = function () {
transMode = $("#transitionInTypeSlider").val();
transType = $("#transitionInSpeedTypeSlider").val();
transEasingFunc = $("#transitionEasingFunctionSlider").val();
var thickness = 5,
seriesType = $("#seriesType").val();
if (seriesType == "area" ||
seriesType == "splineArea" ||
seriesType == "column" ||
seriesType == "stepArea" || seriesType == "bar") {
thickness = 1;
}
$("#chart").igDataChart("option", "series", [{ name: "2005Population", remove: true }]);
$("#chart").igDataChart("option", "series", [{ name: "1995Population", remove: true }]);
$("#chart").igDataChart("option", "axes", [{ name: "PopulationAxis", remove: true }]);
$("#chart").igDataChart("option", "axes", [{ name: "NameAxis", remove: true }]);
if (seriesType == "bar") {
$("#chart").igDataChart("option", "axes", [{
name: "NameAxis",
type: "numericX"
}]);
$("#chart").igDataChart("option", "axes", [{
name: "PopulationAxis",
type: "categoryY",
minimumValue: 0,
label: "CountryName",
title: "人口 (百万人単位)"
}]);
$("#chart").igDataChart("option", "series", [{
type: seriesType,
name: "2005Population",
title: "2005",
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop2005",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: thickness,
transitionInMode: transMode,
transitionInSpeedType: transType,
transitionInEasingFunction: transEasingFunc
}]);
$("#chart").igDataChart("option", "series", [{
type: seriesType,
name: "1995Population",
title: "1995",
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop1995",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: thickness,
transitionInMode: transMode,
transitionInSpeedType: transType,
transitionInEasingFunction: transEasingFunc
}]);
} else {
$("#chart").igDataChart("option", "axes", [{
name: "NameAxis",
type: "categoryX",
label: "CountryName"
}]);
$("#chart").igDataChart("option", "axes", [{
name: "PopulationAxis",
type: "numericY",
minimumValue: 0,
title: "人口 (百万人単位)",
}]);
if (seriesType == "rangeColumn" || seriesType == "rangeArea") {
$("#chart").igDataChart("option", "series", [{
type: seriesType,
name: "2005Population",
title: "2005",
highMemberPath: "Pop2005",
lowMemberPath: "Pop1995",
xAxis: "NameAxis",
yAxis: "PopulationAxis",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: thickness,
transitionInMode: transMode,
transitionInSpeedType: transType,
transitionInEasingFunction: transEasingFunc
}]);
} else {
$("#chart").igDataChart("option", "series", [{
type: seriesType,
name: "2005Population",
title: "2005",
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop2005",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: thickness,
transitionInMode: transMode,
transitionInSpeedType: transType,
transitionInEasingFunction: transEasingFunc
}]);
$("#chart").igDataChart("option", "series", [{
type: seriesType,
name: "1995Population",
title: "1995",
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop1995",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
thickness: thickness,
transitionInMode: transMode,
transitionInSpeedType: transType,
transitionInEasingFunction: transEasingFunc
}]);
}
}
};
$("#transitionInTypeSlider").change(function (e) {
redrawChart();
});
$("#transitionInSpeedTypeSlider").change(function (e) {
redrawChart();
});
$("#transitionEasingFunctionSlider").change(function (e) {
redrawChart();
});
});
</script>
<style type="text/css">
td { vertical-align: top; }
.chartElement {
padding-bottom: 20px;
}
.selectionOptions
{
margin-bottom: 10px;
}
.sliderBounds {
width: 95px;
margin: 6px 3px 6px 6px;
display: inline-block;
}
.optionContainer {
min-width: 120px;
max-width: 250px;
margin: 2px;
padding: 2px;
display: inline-block;
border: 1px solid #e0e0e0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.selectBounds {
min-width: 120px;
max-width: 132px;
}
</style>
<div class="selectionOptions" >
シリーズ タイプ:
<select id="seriesType" class="selectBounds">
<option value="area">エリア チャート</option>
<option value="column">柱状チャート</option>
<option value="line" selected="selected">折れ線チャート</option>
<option value="splineArea">スプライン エリア チャート</option>
<option value="spline">スプライン チャート</option>
<option value="stepArea">ステップ エリア チャート</option>
<option value="stepLine">ステップ折れ線チャート</option>
<option value="point">ポイント</option>
<option value="rangeColumn">範囲柱状チャート</option>
<option value="rangeArea">範囲エリア チャート</option>
<option value="bar">棒チャート</option>
</select>
</div>
<table>
<tr>
<td id="chart" class="chartElement"/>
<td id="lineLegend" style="float: left"/>
</tr>
</table>
<div>
<fieldset id="chartOptions">
<legend>チャート オプション</legend>
<div class="optionContainer">
トランジション タイプ
<br />
<select id="transitionInTypeSlider">
<option value="auto" selected="selected">auto</option>
<option value="fromZero" >fromZero</option>
<option value="accordionFromLeft">accordionFromLeft</option>
<option value="accordionFromRight" >accordionFromRight</option>
<option value="accordionFromTop" >accordionFromTop</option>
<option value="accordionFromBottom" >accordionFromBottom</option>
<option value="expand">expand</option>
<option value="sweepFromLeft">sweepFromLeft</option>
<option value="sweepFromRight" >sweepFromRight</option>
<option value="sweepFromTop" >sweepFromTop</option>
<option value="sweepFromBottom" >sweepFromBottom</option>
<option value="sweepFromCenter" >sweepFromCenter</option>
<option value="accordionFromCategoryAxisMinimum">accordionFromCategoryAxisMinimum</option>
<option value="accordionFromCategoryAxisMaximum" >accordionFromCategoryAxisMaximum</option>
<option value="accordionFromValueAxisMinimum" >accordionFromValueAxisMinimum</option>
<option value="accordionFromValueAxisMaximum" >accordionFromValueAxisMaximum</option>
<option value="sweepFromCategoryAxisMinimum">sweepFromCategoryAxisMinimum</option>
<option value="sweepFromCategoryAxisMaximum" >sweepFromCategoryAxisMaximum</option>
<option value="sweepFromValueAxisMinimum" >sweepFromValueAxisMinimum</option>
<option value="sweepFromValueAxisMaximum" >sweepFromValueAxisMaximum</option>
</select>
</div>
<div class="optionContainer">
スピード タイプ
<br />
<select id="transitionInSpeedTypeSlider">
<option value="auto" selected="selected">auto</option>
<option value="normal" >normal</option>
<option value="valueScaled">valueScaled</option>
<option value="indexScaled" >indexScaled</option>
<option value="random" >random</option>
</select>
</div>
<div class="optionContainer">
イージング関数
<br />
<select id="transitionEasingFunctionSlider">
<option value="linear" selected="selected">linear</option>
<option value="cubic" >cubic</option>
</select>
</div>
</fieldset>
</div>
<div style="float: right" class="Quandl-attribution">
人口のデータ ソース:
<a href="http://www.quandl.com/" target="_blank">Quandl</a>
</div>
</body>
</html>
var data = [//{ "Date": "12/31/2011", "ukPopulation": 62.74, "francePopulation": 65.18 },
{ "Date": "12/31/2010", "ukPopulation": 62.26, "francePopulation": 64.82 },
//{ "Date": "12/31/2009", "ukPopulation": 61.81, "francePopulation": 64.48 },
//{ "Date": "12/31/2008", "ukPopulation": 61.39, "francePopulation": 64.13 },
//{ "Date": "12/31/2007", "ukPopulation": 60.98, "francePopulation": 63.78 },
//{ "Date": "12/31/2006", "ukPopulation": 60.59, "francePopulation": 63.39 },
{ "Date": "12/31/2005", "ukPopulation": 60.22, "francePopulation": 62.96 },
//{ "Date": "12/31/2004", "ukPopulation": 59.86, "francePopulation": 62.49 },
//{ "Date": "12/31/2003", "ukPopulation": 59.56, "francePopulation": 62.04 },
//{ "Date": "12/31/2002", "ukPopulation": 59.32, "francePopulation": 61.6 },
//{ "Date": "12/31/2001", "ukPopulation": 59.10, "francePopulation": 61.16 },
{ "Date": "12/31/2000", "ukPopulation": 58.89, "francePopulation": 60.72 },
//{ "Date": "12/31/1999", "ukPopulation": 58.68, "francePopulation": 60.32 },
//{ "Date": "12/31/1998", "ukPopulation": 58.48, "francePopulation": 60.01 },
//{ "Date": "12/31/1997", "ukPopulation": 58.31, "francePopulation": 59.8 },
//{ "Date": "12/31/1996", "ukPopulation": 58.16, "francePopulation": 59.59 },
{ "Date": "12/31/1995", "ukPopulation": 58.01, "francePopulation": 59.38 },
//{ "Date": "12/31/1994", "ukPopulation": 57.86, "francePopulation": 59.18 },
//{ "Date": "12/31/1993", "ukPopulation": 57.71, "francePopulation": 58.96 },
//{ "Date": "12/31/1992", "ukPopulation": 57.58, "francePopulation": 58.71 },
//{ "Date": "12/31/1991", "ukPopulation": 57.42, "francePopulation": 58.43 },
{ "Date": "12/31/1990", "ukPopulation": 57.24, "francePopulation": 58.14 },
//{ "Date": "12/31/1989", "ukPopulation": 57.07, "francePopulation": 57.83 },
//{ "Date": "12/31/1988", "ukPopulation": 56.92, "francePopulation": 57.49 },
//{ "Date": "12/31/1987", "ukPopulation": 56.80, "francePopulation": 57.17 },
//{ "Date": "12/31/1986", "ukPopulation": 56.68, "francePopulation": 56.87 },
{ "Date": "12/31/1985", "ukPopulation": 56.55, "francePopulation": 56.58 },
//{ "Date": "12/31/1984", "ukPopulation": 56.42, "francePopulation": 56.31 },
//{ "Date": "12/31/1983", "ukPopulation": 56.33, "francePopulation": 56.04 },
//{ "Date": "12/31/1982", "ukPopulation": 56.31, "francePopulation": 55.74 },
//{ "Date": "12/31/1981", "ukPopulation": 56.33, "francePopulation": 55.41 },
{ "Date": "12/31/1980", "ukPopulation": 56.31, "francePopulation": 55.1 },
//{ "Date": "12/31/1979", "ukPopulation": 56.24, "francePopulation": 54.82 },
//{ "Date": "12/31/1978", "ukPopulation": 56.19, "francePopulation": 54.58 },
//{ "Date": "12/31/1977", "ukPopulation": 56.19, "francePopulation": 54.34 },
//{ "Date": "12/31/1976", "ukPopulation": 56.21, "francePopulation": 54.1 },
{ "Date": "12/31/1975", "ukPopulation": 56.22, "francePopulation": 53.88 },
//{ "Date": "12/31/1974", "ukPopulation": 56.22, "francePopulation": 53.63 },
//{ "Date": "12/31/1973", "ukPopulation": 56.19, "francePopulation": 53.29 },
//{ "Date": "12/31/1972", "ukPopulation": 56.08, "francePopulation": 52.86 },
//{ "Date": "12/31/1971", "ukPopulation": 55.89, "francePopulation": 52.4 },
{ "Date": "12/31/1970", "ukPopulation": 55.66, "francePopulation": 51.9 },
//{ "Date": "12/31/1969", "ukPopulation": 55.44, "francePopulation": 51.43 },
//{ "Date": "12/31/1968", "ukPopulation": 55.21, "francePopulation": 51.01 },
//{ "Date": "12/31/1967", "ukPopulation": 54.94, "francePopulation": 50.63 },
//{ "Date": "12/31/1966", "ukPopulation": 54.64, "francePopulation": 50.22 },
{ "Date": "12/31/1965", "ukPopulation": 54.34, "francePopulation": 49.79 },
//{ "Date": "12/31/1964", "ukPopulation": 54.00, "francePopulation": 49.32 },
//{ "Date": "12/31/1963", "ukPopulation": 53.65, "francePopulation": 48.81 },
//{ "Date": "12/31/1962", "ukPopulation": 53.25, "francePopulation": 47.97 },
//{ "Date": "12/31/1961", "ukPopulation": 52.80, "francePopulation": 47.11 },
{ "Date": "12/31/1960", "ukPopulation": 52.40, "francePopulation": 46.61 }
];