製品版のみの機能
データ チャート - シリーズのハイライト (財務)
このサンプルでは、財務シリーズでシリーズのハイライト機能を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
シリーズ タイプ:
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Series Highlighting Financial</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- 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" />
<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/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.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/financial-indicators.js"></script>
<script type="text/javascript" src="/data-files/financial-data.js"></script>
<script type="text/javascript">
$(function () {
$("#chart").igDataChart({
width: "100%",
height: "400px",
dataSource: data,
title: "財務チャート",
horizontalZoomable: true,
verticalZoomable: true,
axes: [{
type: "categoryX",
label: "Date",
name: "xAxis",
title: "日付"
}, {
type: "numericY",
name: "yAxis",
title: "価格"
}],
series: [{
type: "financial",
displayType: "candlestick",
closeMemberPath: "Close",
highMemberPath: "High",
lowMemberPath: "Low",
openMemberPath: "Open",
volumeMemberPath: "Volume",
xAxis: "xAxis",
yAxis: "yAxis",
name: "indicatorSeries",
title: "Financial Indicator Data",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
}]
});
$("#seriesType").change(function (e) {
var seriesType = $("#seriesType").val();
var thickness = 3;
if (seriesType == "candlestick" ||
seriesType == "priceChannelOverlay" ||
seriesType == "bollingerBandsOverlay") {
thickness = 1;
}
if (seriesType == "ohlc") {
thickness = 2;
}
$("#chart").igDataChart("option", "series", [{name: "indicatorSeries",remove: true}]);
if (seriesType == "ohlc" || seriesType == "candlestick") {
$("#chart").igDataChart("option", "series", [{
type: "financial",
displayType: seriesType,
isTransitionInEnabled: true,
isHighlightingEnabled: true,
closeMemberPath: "Close",
highMemberPath: "High",
lowMemberPath: "Low",
openMemberPath: "Open",
volumeMemberPath: "Volume",
thickness: thickness,
xAxis: "xAxis",
yAxis: "yAxis",
name: "indicatorSeries",
title: "Financial Indicator Data"
}]);
}
else {
$("#chart").igDataChart("option", "series", [{
type: seriesType,
isHighlightingEnabled: true,
isTransitionInEnabled: true,
closeMemberPath: "Close",
highMemberPath: "High",
lowMemberPath: "Low",
openMemberPath: "Open",
volumeMemberPath: "Volume",
thickness: thickness,
xAxis: "xAxis",
yAxis: "yAxis",
name: "indicatorSeries",
title: "Financial Indicator Data"
}]);
}
});
// Transition Duration Slider
$("#transitionDurationSlider").slider({
min: 0,
max: 2000,
value: 1000,
step: 50,
slide: function (event, ui) {
$("#chart").igDataChart("option", "highlightingTransitionDuration", ui.value);
$("#transitionDurationLabel").text(ui.value);
}
});
});
</script>
<style type="text/css">
.selectionOptions
{
width: 450px;
margin-top: 10px;
}
.selectionOptions > label
{
display: 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;
}
td { vertical-align: top; }
.chartElement {
padding-bottom: 20px;
}
.sliderBounds {
width: 95px;
margin: 6px 3px 6px 6px;
display: inline-block;
}
.selectBounds {
min-width: 120px;
max-width: 132px;
}
</style>
<div class="selectionOptions" >
シリーズ タイプ:
<select id="seriesType" class="selectBounds">
<option value="candlestick" selected="selected">ローソク足チャート</option>
<option value="ohlc">OHLC</option>
<option value="absoluteVolumeOscillatorIndicator" >絶対出来高オシレーター</option>
<option value="averageTrueRangeIndicator">ATR (アベレージ トゥルー レンジ)</option>
<option value="accumulationDistributionIndicator">蓄積/分配</option>
<option value="averageDirectionalIndexIndicator">平均方向性指数</option>
<option value="bollingerBandsOverlay">ボリンジャー バンド オーバーレイ</option>
<option value="bollingerBandWidthIndicator">ボリンジャー バンド幅</option>
<option value="chaikinOscillatorIndicator">チャイキン オシレーター</option>
<option value="chaikinVolatilityIndicator">チャイキン ボラティリティ</option>
<option value="commodityChannelIndexIndicator">商品チャネル指数 (CCI)</option>
<option value="detrendedPriceOscillatorIndicator">トレンド除去価格オシレーター</option>
<option value="easeOfMovementIndicator">イーズ オブ ムーブメント</option>
<option value="fastStochasticOscillatorIndicator">ファスト スト キャスティクス オシレーター</option>
<option value="forceIndexIndicator">フォース インデックス</option>
<option value="fullStochasticOscillatorIndicator">フル ストキャスティクス オシレーター</option>
<option value="marketFacilitationIndexIndicator">マーケット ファシリテーション インデックス</option>
<option value="massIndexIndicator">マス インデックス</option>
<option value="medianPriceIndicator">メディアンプライス</option>
<option value="moneyFlowIndexIndicator">マネー フロー インデックス</option>
<option value="movingAverageConvergenceDivergenceIndicator">移動平均収束拡散</option>
<option value="negativeVolumeIndexIndicator">負出来高指数 (NVI)</option>
<option value="onBalanceVolumeIndicator">OBV (オン バランス ボリューム)</option>
<option value="percentagePriceOscillatorIndicator">パーセンテージ価格オシレーター</option>
<option value="percentageVolumeOscillatorIndicator">パーセンテージ出来高オシレーター</option>
<option value="positiveVolumeIndexIndicator">PVI (ポジティブ ボリューム インデックス)</option>
<option value="priceChannelOverlay">プライス チャネル オーバーレイ</option>
<option value="priceVolumeTrendIndicator">価格出来高トレンド</option>
<option value="rateOfChangeAndMomentumIndicator">変化率およびモメンタム</option>
<option value="relativeStrengthIndexIndicator">相対力指数</option>
<option value="slowStochasticOscillatorIndicator">スロー ストキャスティクス オシレーター</option>
<option value="standardDeviationIndicator">標準偏差</option>
<option value="stochRSIIndicator">ストキャスティクス RSI</option>
<option value="trixIndicator">TRIX</option>
<option value="typicalPriceIndicator">代表価格</option>
<option value="ultimateOscillatorIndicator">アルティメット オシレーター</option>
<option value="weightedCloseIndicator">重み付きクローズ</option>
<option value="williamsPercentRIndicator">ウィリアム パーセント レンジ</option>
</select>
</div>
<div id="chart" class="chartElement"></div>
<div style="float: left">
<fieldset id="chartOptions">
<legend>チャート オプション</legend>
<div class="optionContainer">
トランジション期間
<br />
<div id="transitionDurationSlider" class="sliderBounds"></div>
<label id="transitionDurationLabel">1000</label>
</div>
</fieldset>
</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: "ウィリアム パーセント レンジ" }
];