製品版のみの機能
データ チャート - 財務指標
このサンプルでは、チャート コントロールの財務指標を紹介します。財務指標は別のチャート シリーズ タイプとして公開され、ファイナンシャル チャート シリーズで使用できます。財務指標は株価およびトレンドについての情報を提供します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Financial Indicators</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/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" />
<!-- 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.lob.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/financial-indicators.js"></script>
<script type="text/javascript" src="/data-files/financial-data.js"></script>
<script type="text/javascript">
$(function () {
$("#priceChart").igDataChart({
width: "450px",
height: "400px",
dataSource: data,
title: "Microsoft 株 (MSFT)",
subtitle: "2 か月間のデータ",
axes: [{
type: "categoryX",
label: "Date",
name: "xAxis",
interval: 10,
title: "日付"
}, {
type: "numericY",
name: "yAxis",
title: "価格"
}],
series: [{
type: "financial",
isTransitionInEnabled: true,
closeMemberPath: "Close",
highMemberPath: "High",
lowMemberPath: "Low",
openMemberPath: "Open",
volumeMemberPath: "Volume",
xAxis: "xAxis",
yAxis: "yAxis",
name: "priceSeries",
title: "Price Data"
}]
});
$("#indicatorChart").igDataChart({
width: "450px",
height: "400px",
dataSource: data,
title: "財務チャート",
axes: [{
type: "categoryX",
label: "Date",
name: "xAxis",
interval: 10,
title: "日付"
}, {
type: "numericY",
name: "yAxis",
title: "価格"
}],
series: [{
type: "moneyFlowIndexIndicator",
isTransitionInEnabled: true,
closeMemberPath: "Close",
highMemberPath: "High",
lowMemberPath: "Low",
openMemberPath: "Open",
volumeMemberPath: "Volume",
xAxis: "xAxis",
yAxis: "yAxis",
name: "indicatorSeries",
title: "Financial Indicator Data"
}]
});
$.each(indicators, function (index, item) {
$('#indicatorTypes').append($('<option></option>').val(item.key).html(item.text));
});
$("#indicatorTypes").change(function () {
changeIndicator($(this).val());
});
});
function changeIndicator(newIndicator) {
$("#indicatorChart").igDataChart("option", "series", [{
name: "indicatorSeries",
remove: true
}]);
$("#indicatorChart").igDataChart("option", "series", [{
type: newIndicator,
name: "indicatorSeries",
title: "Financial Indicator Data",
xAxis: "xAxis",
yAxis: "yAxis",
closeMemberPath: "Close",
highMemberPath: "High",
lowMemberPath: "Low",
openMemberPath: "Open",
volumeMemberPath: "Volume"
}]);
};
</script>
<style type="text/css">
#priceChart, #indicatorChart
{
margin: 10px 0px 10px 0px;
}
.selectionOptions
{
width: 450px;
margin-top: 10px;
}
.selectionOptions > label
{
display: block;
}
</style>
<div id="priceChart"></div>
<div id="indicatorChart"></div>
<div class="selectionOptions">
<label>インジケーターの選択:</label>
<select id="indicatorTypes"></select>
</div>
<div class="selectionOptions" style="display: inline-block">
<label>株価のデータ ソース:
<a href="http://www.quandl.com/" target="_blank">Quandl</a>
</label>
</div>
</body>
</html>
var indicators = [
{ key: "absoluteVolumeOscillatorIndicator", text: "絶対出来高オシレーター" },
{ key: "averageTrueRangeIndicator", text: "ATR (アベレージ トゥルー レンジ)" },
{ key: "accumulationDistributionIndicator", text: "蓄積/分配" },
{ key: "averageDirectionalIndexIndicator", text: "平均方向性指数" },
{ key: "bollingerBandsOverlay", text: "ボリンジャー バンド オーバーレイ" },
{ key: "bollingerBandWidthIndicator", text: "ボリンジャー帯域幅" },
{ key: "chaikinOscillatorIndicator", text: "チャイキン オシレーター" },
{ key: "chaikinVolatilityIndicator", text: "チャイキン ボラティリティ" },
{ key: "commodityChannelIndexIndicator", text: "商品チャネル指数 (CCI)" },
{ key: "detrendedPriceOscillatorIndicator", text: "トレンド除去価格オシレーター" },
{ key: "easeOfMovementIndicator", text: "イーズ オブ ムーブメント" },
{ key: "fastStochasticOscillatorIndicator", text: "ファスト スト キャスティクス オシレーター" },
{ key: "forceIndexIndicator", text: "フォース インデックス" },
{ key: "fullStochasticOscillatorIndicator", text: "フル ストキャスティクス オシレーター" },
{ key: "marketFacilitationIndexIndicator", text: "マーケット ファシリテーション インデックス" },
{ key: "massIndexIndicator", text: "マス インデックス" },
{ key: "medianPriceIndicator", text: "メディアンプライス" },
{ key: "moneyFlowIndexIndicator", text: "マネー フロー インデックス " },
{ key: "movingAverageConvergenceDivergenceIndicator", text: "移動平均収束拡散" },
{ key: "negativeVolumeIndexIndicator", text: "負出来高指数 (NVI)" },
{ key: "onBalanceVolumeIndicator", text: "OBV (オン バランス ボリューム) インジケーター" },
{ key: "percentagePriceOscillatorIndicator", text: "パーセンテージ価格オシレーター" },
{ key: "percentageVolumeOscillatorIndicator", text: "パーセンテージ出来高オシレーター" },
{ key: "positiveVolumeIndexIndicator", text: "PVI (ポジティブ ボリューム インデックス)" },
{ key: "priceChannelOverlay", text: "プライス チャネル オーバーレイ" },
{ key: "priceVolumeTrendIndicator", text: "価格出来高トレンド" },
{ key: "rateOfChangeAndMomentumIndicator", text: "変化率およびモメンタム" },
{ key: "relativeStrengthIndexIndicator", text: "相対力指数" },
{ key: "slowStochasticOscillatorIndicator", text: "スロー ストキャスティクス オシレーター" },
{ key: "standardDeviationIndicator", text: "標準偏差" },
{ key: "stochRSIIndicator", text: "ストキャスティクス RSI" },
{ key: "trixIndicator", text: "Trix" },
{ key: "typicalPriceIndicator", text: "代表価格" },
{ key: "ultimateOscillatorIndicator", text: "アルティメット オシレーター" },
{ key: "weightedCloseIndicator", text: "重み付きクローズ" },
{ key: "williamsPercentRIndicator", text: "ウィリアム パーセント レンジ" }
];