Dojo燭臺圖表 - json更新系列

我使用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的數據陣列部分應如何備考。寫或寫入以獲取正確的一系列數據？

謝謝，任何幫助將不勝感激！

來源

2012-04-23 user982144

你最好的選擇是和商店和Observable對象一起進行。這樣數據更新時存儲更新。

// Initial data 
var data = [ 
    // This information, presumably, would come from a database or web service 
    // Note that the values for site are either 1 or 2 
    { id: 1, value: 20, site: 1 }, 
    { id: 2, value: 16, site: 1 }, 
    { id: 3, value: 11, site: 1 }, 
    { id: 4, value: 18, site: 1 }, 
    { id: 5, value: 26, site: 1 }, 
    { id: 6, value: 19, site: 2 }, 
    { id: 7, value: 20, site: 2 }, 
    { id: 8, value: 28, site: 2 }, 
    { id: 9, value: 12, site: 2 }, 
    { id: 10, value: 4, site: 2 } 
]; 

// Create the data store 
// Store information in a data store on the client side 
var store = dojo.store.Observable(new dojo.store.Memory({ 
    data: { 
     identifier: "id", 
     label: "Users Online", 
     items: data 
    } 
}));

您可以加載外部文件您的商店通過XHR

這是你如何讓你的系列設置

// Adds a StoreSeries to the y axis, queries for all site 1 items 
chart.addSeries("y", new dojox.charting.StoreSeries(store, { query: { site: 1 } }, "value"));

來源

2013-02-15 16:48:20 CodeViking

閱讀文檔，我可以去道場的網站。 ..我沒有來這裏複製和粘貼... – Nico 2013-10-24 12:16:50

Dojo燭臺圖表 - json更新系列

回答

相關問題