C1CandlestickChart コントロールのリモートデータへの連結は、クライアント側で行われます。
このトピックを完了するには、まず、C1CandlestickChart コントロールをアプリケーションに追加し、そのコントロールに C1CandlestickChart1 という名前を付けてから、スクリプト参照を <head> </head> タグ内に追加します。このリンクをクリックすると、参照を見つけることができます。
次のスクリプトは、チャートをリモートのデータソースに連結し、データを設定し、ChartStyles プロパティを使用してチャートをカスタマイズします。このスクリプトは、プロジェクトの <head> </head> タグ内にあるスクリプト参照の下に置く必要があります。
| スクリプト |
コードのコピー
|
|---|---|
<script type = "text/javascript">
$(document).ready(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function (data) {
var count = 50,
length = data.length,
dt = {},
x = [],
high = [],
low = [],
open = [],
close = [];
$.each(data, function (i, d) {
if (i > count) {
return false;
}
x.push(new Date(d[0]));
open.push(d[1]);
high.push(d[2]);
low.push(d[3]);
close.push(d[4]);
})
dt = {
x: x,
high: high,
low: low,
open: open,
close: close
};
$("#C1CandlestickChart1").wijcandlestickchart({
type: "candlestick",
hint: {
content: function () {
return this.label + '\n' + this.x + '\n High:' + this.high + '\n Low:' + this.low + '';
}
},
barFormater: function (obj) {
var eles = obj.eles,
data = obj.data,
open = data.open,
close = data.close,
hlEl = eles.highLow,
oEl = eles.open,
cEl = eles.close,
style = {};
if (open > close) {
style.stroke = "#00ff00";
}
else {
style.stroke = "#ff0000";
}
hlEl.attr(style);
oEl.attr(style);
cEl.attr(style);
},
seriesList: [{
label: "AAPL",
legendEntry: true,
data: dt
}],
seriesStyles: [{
highLow: { fill: "#ff9900", width: 1 },
open: { fill: "#ff9900", height: 2 },
close: { fill: "#ff9900", height: 2 },
fallingClose: { fill: "#ff0000", width: 6 },
raisingClose: { fill: "#00ff00", width: 6 }
}]
});
});
});
</script>
|
|
このトピックの作業結果
次の図は、リモートデータに連結された C1CandlestickChart を示します。
