我使用Dojo工具箱創建燭臺圖表。我有一系列不同系列的數據,用戶可以點擊按鈕選擇數據年份並更新蠟燭圖表。我已經能夠成功地做到這一點,當我在代碼中直接擁有的數據:Dojo燭臺圖表 - json更新系列
makeCharts = function() {
series2012 = [
{open: 477, close: 471.5, high: 477, low: 471.5, mid: 474.2, tooltip:"Orange <br />Rate: 474.2"},
{open: 524.5, close: 442.1, high: 524.5, low: 442.1, mid: 481.7, tooltip:"Blue <br />Rate: 481.7"},etc.......
series2011 = [
{open: 600, close: 481.5, high: 600, low: 481.5, mid: 490.2, tooltip:"Orange <br />Rate: 490.2"},
{open: 554.5, close: 412.1, high: 554.5, low: 412.1, mid: 481.7, tooltip:"Blue <br />Rate: 481.7"},etc.......
要添加系列:
chart1.addSeries("Series 1", series2012,{stroke: {color:"#003399"}, fill: "#3399cc"});
然後更新與點擊一個按鈕系列:
<button onclick="chart1.updateSeries('Series 1', series2011);chart1.render();">2011</button>
我真正想做的是從外部json文件中查詢數據。添加系列時,我已經能夠做到這一點,但不能更新它。 (見問號在HTML - 這是我不確定什麼進入):
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/soria/soria.css" />
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
#charts {clear: both;margin-bottom: 50px;}
.chart-area {float: left;border: 1px solid #ccc;width: 450px;height: 350px;margin: 3px;}
.chart {width: 450px;height: 300px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.Button");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.plot2d.Candlesticks");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.DataSeries");
dojo.require("dojox.charting.action2d.Shake");
dojo.addOnLoad(function() {
store4 = new dojo.data.ItemFileReadStore({
url: "candle_update1.json"});
makeCharts = function(){
chart1 = new dojox.charting.Chart2D("candleChart");
chart1.addPlot("default", {type: "Candlesticks", gap: 2, minBarSize: 5, maxBarSize: 10});
chart1.addAxis("x", {
natural: true,
majorLabels: true,
includeZero: false,
majorTickStep: 1,
majorTick: {
stroke: "black",
length: 5
},
fixUpper:"major",
stroke: "black",
labels: [
{value: 1, text: "Orange"},
{value: 2, text: "Red"},
{value: 3, text: "Blue"},
{value: 4, text: "Black"},
{value: 5, text: "Yellow"},
{value: 6, text: "White"},
{value: 7, text: "Green"},
{value: 8, text: "Purple"},
{value: 9, text: "Brown"}
],rotation:-45
});
chart1.addAxis("y", {
vertical: true,
leftBottom: true,
includeZero: true,
majorLabels: true,
fixUpper: "major",
fixed: true,
max: 800
});
chart1.addSeries("Series 1", new dojox.charting.DataSeries(
store4, {query: {series: 2012}}, {open: "open", close: "close", high: "high", low: "low", mid: "mid", tooltip: "tooltip"}));
var anim2 = new dojox.charting.action2d.Tooltip(chart1, "default");
var anim1a = new dojox.charting.action2d.Shake(chart1, "default");
};
dojo.addOnLoad(function(){
makeCharts();
});
});
</script>
</head>
<body class="soria">
<h1>Dojo Candlesticks update test</h1>
<div id="charts">
<div class="chart-area">
<div id="candleChart" class="chart"></div>
</div>
</div>
<span style="font-size:14px;"><strong>Select years:</strong></span>
<span id="btn">
<button onclick="chart1.updateSeries('Series 1', ?????????);chart1.render();">2012</button>
<button onclick="chart1.updateSeries('series1', ????????);chart1.render();">2011</button>
</span>
</body>
</html>
外部JSON文件(candle_update1.json):
{「identifier」:「id」,
「label」:「county」,
「items」:[ {「county」:「Orange」,「id」:「1」,「series」 ,「打開」:477,「關閉」:471.5,「高」:477,「低」:471.5,「中」:474.2,「工具提示」:「橙色
率:474.2「}, {」縣「:」藍色「,」ID「:」2「,」系列「:2012年,」開放「:524.5,」關閉「:442.1,」高「:524.5, 「:」442.1,「mid」:481.7,「tooltip」:「藍色
率:481.7」}, {「county」:「Red」,「id」:「3」,「series」 :508.1,「close」:481,「high」:508.1,「low」:481,「mid」:494.4,「tooltip」:「Red
rate:494.4」}, {「county」:「Black」, 「ID」: 「4」, 「系列」:2012年, 「開放」:503.2, 「閉」:439.3, 「高」:503.2, 「低」:439.3, 「中等」:470.4, 「提示」:「黑
Rate:470.4「}, {」county「:」Yellow「,」id「:」5「,」series「:2012,」open「:492.1,」close「:430.1,」high「:492.1,低「:430.1,」mid「:460.3,」tooltip「:」Yellow
rate:460.3「}, {」county「:」White「,」id「:」6「,」series「:2012, 「:495.5,」close「:425.5,」high「:495.5,」low「:425.5,」mid「:459.6,」tooltip「:」白色
率:459.6「}, {」縣誌 「:」 綠色」, 「ID」: 「7」, 「系列」:2012年, 「開放」:550.9, 「閉」:414.4, 「高」:550.9, 「低」:414.4, 「中等」:478.2 ,「tooltip」:「Green
rate:478.2」}, {「county」:「Purple」,「id」:「8」,「series」:2012,「open」:484.8,「close」:431.5, 「high」:484.8,「low」:431.5,「mid」:457.6,「tooltip」:「purple
rate:457.6」}, {「county」:「Brown」,「id」:「9」系列「:2012,」open「:486.6,」close「:419.6,」high「:486.6,」low「:419.6,」mid「:452.1,」tooltip「:」Brown
rate:452.1「}, { 「縣誌」: 「橙」, 「ID」: 「1A」, 「系列」:2011年, 「開放」:600, 「閉」:481.5, 「高」:600, 「低」:481.5, 「中間」: 490.2,「tooltip」:「Orange
rate:450.2」}, {「county」:「Blue」,「id」:「2a」,「series」:2011,「open」:554.5,「close」:412.1 ,「高」:554.5,「低」:412.1,「中」:451.7,「工具提示」:「藍色
率:451.7」}, {「county」:「紅」,「id」:「3a」, 「系列」:2011年,「啊, pen「:608.1,」close「:481,」high「:608.1,」low「:481,」mid「:594.4,」tooltip「:」Red
rate:474.4「}, {」county「 」, 「ID」: 「4A」, 「系列」:2011年, 「開放」:703.2, 「閉」:409.3, 「高」:703.2, 「低」:409.3, 「中等」:470.4, 「提示」: 「黑色
費率:470.4」}, {「縣」:「黃色」,「id」:「5a」,「系列」:2011,「open」:392.1,「close」:230.1,「high」:392.1 ,「low」:230.1,「mid」:260.3,「tooltip」:「Yellow
rate:260.3」}, {「county」:「White」,「id」:「6a」,「series」 「打開」:495.5,「關閉」:425.5,「高」:495.5,「低」:425.5,「中」:459.6,「工具提示」:「白色
率:459。{「county」:「Green」,「id」:「7a」,「series」:2011,「open」:750.9,「close」:414.4,「high」:750.9,「low」: 414.4「mid」:478.2「tooltip」:「Green
rate:478.2」}, {「county」:「Purple」,「id」:「8a」,「series」:2011,「open」:584.8 ,「close」:431.5,「high」:584.8,「low」:431.5,「mid」:457.6,「tooltip」:「紫色
率:457.6」}, {「county」:「Brown」,「 「:」9a「,」系列「:2011,」打開「:786.6,」關閉「:319.6,」高「:786.6,」低「:319.6,」中「:452.1,」工具提示「:」布朗
率:452.1" }
]}
所以,我一直在努力如何更新系列updateseries的數據陣列部分應如何備考。寫或寫入以獲取正確的一系列數據?
謝謝,任何幫助將不勝感激!
閱讀文檔,我可以去道場的網站。 ..我沒有來這裏複製和粘貼... – Nico 2013-10-24 12:16:50