製品版のみの機能
Infragistics Loader - DataChart - System.js
このサンプルでは、Ignite UI for jQuery モジュールを読み込むために System.js を使用する方法を紹介します。必要な CSS と JavaScript ディレクトリへのパスを提供し、ローダーがページにフェッチするリソースを宣言する必要があります。このサンプルは igDataChart コントロールを読み込みます。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Axis Title</title>
</head>
<body>
<style type="text/css">
td { vertical-align: top; }
.chartElement {
padding-bottom: 20px;
}
.sliderBounds {
width: 95px;
margin: 6px 3px 6px 6px;
display: inline-block;
}
.optionContainer {
width: 200px;
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>
<table><tr><td id="chart" class="chartElement"></td><td id="columnLegend" style="float: left"></td></tr></table>
<div class="EIA-attribution">
エネルギー データソース::<br />
<a href="http://www.eia.gov" target="_blank">米国エネルギー情報局 (2012 年 9 月)</a>
</div>
<br/>
<div>
<fieldset id="chartOptions">
<legend>軸角度</legend>
<div class="optionContainer">
Y 軸を回転
<div id="yAxisAngleSlider" class="sliderBounds"></div>
<label id="yAxisAngleLabel">-90</label>
</div>
<div class="optionContainer">
X 軸を回転
<div id="xAxisAngleSlider" class="sliderBounds"></div>
<label id="xAxisAngleLabel">0</label>
</div>
</fieldset>
</div>
<script type="text/javascript" src="/data-files/world-energy-production.js"></script>
<script type="text/javascript" src="/jspm_packages/system.js"></script>
<script type="text/javascript" src="/HtmlSamples/loader/systemjs-config.js"></script>
<script type="text/javascript">
System.import("/HtmlSamples/loader/datachart-systemjs.js");
</script>
</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,
},
];