製品版のみの機能
データ チャート - 積層型シリーズ
このサンプルでは、igDataChart コントロールの積層型シリーズを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
エネルギーのデータ ソース:
U.S. Energy Information Administration (2012)
U.S. Energy Information Administration (2012)
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title>Charts - Stacked Series</title>
<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 CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<script type="text/javascript" src="/data-files/world-energy-production.js"></script>
<script>
$(function () {
function CreateChart(seriesType, chartTitle) {
var xAxis = {};
var yAxis = {};
if (seriesType.contains("Bar"))
{
// stack bar series require numeric xAxis and category yAxis
xAxis = { name: "xAxis", type: "numericX", title: "生産されたエネルギー (BTU 40 億単位)" };
yAxis = { name: "yAxis", type: "categoryY", label: "Year", gap: 0.5, };
}
else
{
// other stack series require category xAxis and numeric yAxis
xAxis = { name: "xAxis", type: "categoryX", label: "Year", gap: 0.5, };
yAxis = { name: "yAxis", type: "numericY", title: "生産されたエネルギー (BTU 40 億単位)" };
}
var selector = "#" + seriesType;
$(selector).igDataChart({
dataSource: lastFiveYears,
height: "250px",
width: "250px",
title: chartTitle,
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate",
axes: [ xAxis, yAxis ],
series: [
CreateStackedSeries(seriesType),
],
});
};
function CreateStackedSeries(seriesType) {
var series = {
name: seriesType + "Series",
type: seriesType,
xAxis: "xAxis",
yAxis: "yAxis",
outline: "transparent",
series: [
CreateStackedFragment("Canada"),
CreateStackedFragment("Russia"),
CreateStackedFragment("China"),
CreateStackedFragment("UnitedStates"),
CreateStackedFragment("SaudiArabia"),
]
}
if (seriesType.contains("Column")) {
series.radius = 0;
}
return series;
}
function CreateStackedFragment(memberPath) {
var stackFragment = {
name: memberPath + "Fragment",
title: memberPath,
valueMemberPath: memberPath,
type: "stackedFragment",
showTooltip: true,
tooltipTemplate: memberPath,
};
return stackFragment;
}
CreateChart("stackedBar", "積層型棒");
CreateChart("stacked100Bar", "積層型 100 棒");
CreateChart("stackedArea", "積層型エリア");
CreateChart("stackedColumn", "積層型柱状");
CreateChart("stackedLine", "積層型折れ線");
CreateChart("stackedSpline", "積層型スプライン");
CreateChart("stackedSplineArea", "積層型スプライン エリア");
CreateChart("stacked100Area", "積層型 100 エリア");
CreateChart("stacked100Column", "積層型 100 柱状");
CreateChart("stacked100Line", "積層型 100 折れ線");
CreateChart("stacked100Spline", "積層型 100 スプライン");
CreateChart("stacked100SplineArea", "積層型 100 スプライン エリア");
});
</script>
<style>
.chart {
display: inline-block;
margin: 0 10px 10px 0;
}
.chart h4 {
margin-bottom: 5px;
}
</style>
<div>
<div>
<div class="chart" id="stackedBar"></div>
<div class="chart" id="stacked100Bar"></div>
<div class="chart" id="stackedArea"></div>
<div class="chart" id="stackedColumn"></div>
<div class="chart" id="stacked100Column"></div>
<div class="chart" id="stacked100Area"></div>
<div class="chart" id="stackedLine"></div>
<div class="chart" id="stacked100Line"></div>
<div class="chart" id="stackedSplineArea"></div>
<div class="chart" id="stackedSpline"></div>
<div class="chart" id="stacked100Spline"></div>
<div class="chart" id="stacked100SplineArea"></div>
</div>
<div class="EIAdata-attribution">
エネルギーのデータ ソース:<br />
<a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>
</div>
</div>
</body>
</html>
/*
Data from U.S. Energy Information Administration (2012)
*/
var data = [
{
"Year": 1995,
"Canada": 16.8331,
"SaudiArabia": 20.6591,
"Russia": 41.4181,
"UnitedStates": 71.1744,
"China": 33.5387,
},
{
"Year": 1996,
"Canada": 17.2262,
"SaudiArabia": 20.8153,
"Russia": 39.9461,
"UnitedStates": 72.4860,
"China": 35.1037,
},
{
"Year": 1997,
"Canada": 17.4787,
"SaudiArabia": 21.2433,
"Russia": 38.7414,
"UnitedStates": 72.4715,
"China": 38.4407,
},
{
"Year": 1998,
"Canada": 17.4377,
"SaudiArabia": 21.4151,
"Russia": 39.0652,
"UnitedStates": 72.8764,
"China": 38.8876,
},
{
"Year": 1999,
"Canada": 17.6813,
"SaudiArabia": 20.1783,
"Russia": 40.8088,
"UnitedStates": 71.7420,
"China": 37.5003,
},
{
"Year": 2000,
"Canada": 18.1283,
"SaudiArabia": 21.5931,
"Russia": 41.6954,
"UnitedStates": 71.3322,
"China": 38.7841,
},
{
"Year": 2001,
"Canada": 18.0215,
"SaudiArabia": 20.9456,
"Russia": 42.6263,
"UnitedStates": 71.7343,
"China": 41.6730,
},
{
"Year": 2002,
"Canada": 18.3578,
"SaudiArabia": 20.2696,
"Russia": 44.1627,
"UnitedStates": 70.7132,
"China": 46.2297,
},
{
"Year": 2003,
"Canada": 18.3074,
"SaudiArabia": 23.0489,
"Russia": 47.1823,
"UnitedStates": 69.9627,
"China": 51.2491,
},
{
"Year": 2004,
"Canada": 18.6642,
"SaudiArabia": 24.1590,
"Russia": 49.8648,
"UnitedStates": 70.2224,
"China": 55.9233,
},
{
"Year": 2005,
"Canada": 18.8932,
"SaudiArabia": 25.4401,
"Russia": 51.0796,
"UnitedStates": 69.4437,
"China": 63.9524,
},
{
"Year": 2006,
"Canada": 19.2273,
"SaudiArabia": 24.6105,
"Russia": 52.0557,
"UnitedStates": 70.7539,
"China": 68.2333,
},
{
"Year": 2007,
"Canada": 19.5439,
"SaudiArabia": 23.7326,
"Russia": 52.5599,
"UnitedStates": 71.4000,
"China": 73.2809,
},
{
"Year": 2008,
"Canada": 19.0196,
"SaudiArabia": 25.1682,
"Russia": 52.5460,
"UnitedStates": 73.2178,
"China": 78.3599,
},
{
"Year": 2009,
"Canada": 18.3249,
"SaudiArabia": 22.837,
"Russia": 50.4291,
"UnitedStates": 72.6409,
"China": 84.0643,
},
{
"Year": 2010,
"Canada": 18.3358,
"SaudiArabia": 24.7442,
"Russia": 53.2232,
"UnitedStates": 74.7951,
"China": 90.3918,
},
];
var lastFiveYears = [
{
"Year": 2005,
"Canada": 18.8932,
"SaudiArabia": 25.4401,
"Russia": 51.0796,
"UnitedStates": 69.4437,
"China": 63.9524,
},
{
"Year": 2006,
"Canada": 19.2273,
"SaudiArabia": 24.6105,
"Russia": 52.0557,
"UnitedStates": 70.7539,
"China": 68.2333,
},
{
"Year": 2007,
"Canada": 19.5439,
"SaudiArabia": 23.7326,
"Russia": 52.5599,
"UnitedStates": 71.4000,
"China": 73.2809,
},
{
"Year": 2008,
"Canada": 19.0196,
"SaudiArabia": 25.1682,
"Russia": 52.5460,
"UnitedStates": 73.2178,
"China": 78.3599,
},
{
"Year": 2009,
"Canada": 18.3249,
"SaudiArabia": 22.837,
"Russia": 50.4291,
"UnitedStates": 72.6409,
"China": 84.0643,
},
{
"Year": 2010,
"Canada": 18.3358,
"SaudiArabia": 24.7442,
"Russia": 53.2232,
"UnitedStates": 74.7951,
"China": 90.3918,
}
];
var everyThreeYears = [
{
"Year": 1995,
"Canada": 16.8331,
"SaudiArabia": 20.6591,
"Russia": 41.4181,
"UnitedStates": 71.1744,
"China": 33.5387,
},
{
"Year": 1998,
"Canada": 17.4377,
"SaudiArabia": 21.4151,
"Russia": 39.0652,
"UnitedStates": 72.8764,
"China": 38.8876,
},
{
"Year": 2001,
"Canada": 18.0215,
"SaudiArabia": 20.9456,
"Russia": 42.6263,
"UnitedStates": 71.7343,
"China": 41.6730,
},
{
"Year": 2004,
"Canada": 18.6642,
"SaudiArabia": 24.1590,
"Russia": 49.8648,
"UnitedStates": 70.2224,
"China": 55.9233,
},
{
"Year": 2007,
"Canada": 19.5439,
"SaudiArabia": 23.7326,
"Russia": 52.5599,
"UnitedStates": 71.4000,
"China": 73.2809,
},
{
"Year": 2010,
"Canada": 18.3358,
"SaudiArabia": 24.7442,
"Russia": 53.2232,
"UnitedStates": 74.7951,
"China": 90.3918,
},
];