Dojoの燭台のチャート - jsonのシリーズを更新する

私は、燭台のチャートを作成するためにDojoツールキットを使用しています。私は、ユーザーがデータの年を選択するためにボタンをクリックすることができ、燭台のチャートが更新される、一連の異なる一連のデータを1年ごとに持っています。私は、コード内で直接データを持っていたときにこれを正常に行うことができた：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）：

{"識別子"： "id"、
"ラベル"： "郡"、
"items"：[ {"郡"： "オレンジ"、 "id"： "1"、 "シリーズ"：2012 、 "open"：477、 "close"：471.5、 "high"：477、 "low"：471.5、 "mid"：474.2、 "tooltip"： "Orange
率：474.2 "}、 {"郡 "："青 "、" id "：" 2 "、"系列 "：2012、"公開 "：524.5、"終了 "：442.1、"高 "：524.5、"低"、" mid "：481.7、" tooltip "：" Blue
rate：481.7 "}、 {" county "：" Red "、" id "：" 3 "、" series "：2012、" open " ：508.1、 "close"：481、 "high"：508.1、 "low"：481、 "mid"：494.4、 "tooltip"： "Red
rate：494.4"}、 {"county"： "Black" "id"： "4"、 "series"：2012、 "open"：503.2、 "close"：439.3、 "high"：503.2、 "low"：439.3、 "mid"：470.4、 "tooltip"： "Black
レート：470.4 "}、 {"郡 "："イエロー "、" id "：" 5 "、"シリーズ "：2012、"オープン "：492.1、"クローズ "：430.1、"ハイ "：492.1、「白」、「id」：「6」、「series」：2012、「open」：430.1、「mid」：460.3、「tooltip」：「イエロー
率：460.3」}、 {"county" "：495.5、"閉じる "：425.5、"高 "：495.5、"低 "：425.5、"中 "：459.6、"ツールチップ "："白
率：459.6 "}、 { 「郡」：「グリーン」「id」「7」「シリーズ」2012年「オープン」550.9「クローズ」414.4「高」550.9「低」414.4「中」478.2 、 "ツールチップ"： "緑色
率：478.2"}、 {"郡"： "紫"、 "id"： "8"、 "シリーズ"：2012、 "オープン"：484.8、 "閉じる"：431.5、 {"county"： "Brown"、 "id"： "9"、 "high"：484.8、 "low"：431.5、 "mid"：457.6、 "tooltip"： "Purple
rate：457.6"}、 { 2012」、「オープン」：486.6、「閉じる」：419.6、「高」：486.6、「低」：419.6、「中」：452.1、「ツールチップ」：「ブラウン
率：452.1」}、 { "county"： "orange"、 "id"： "1a"、 "series"：2011、 "open"：600、 "close"：481.5、 "high"：600、 "low"：481.5、 "mid" 490.2、 "ツールチップ"： "オレンジ
率：450.2"}、 {"郡"： "青"、 "id"： "2a"、 "系列"：2011、 "オープン"：554.5、 "クローズ"：412.1 、 "high"：554.5、 "low"：412.1、 "mid"：451.7、 "tooltip"： "Blue
rate：451.7"}、 {"county"： "Red"、 "id"： "3a" "series"：2011、 "o 「ペン」：608.1、「閉じる」：481、「高」：608.1、「低い」：481、「中」：594.4、「ツールチップ」：「赤
率：474.4」}、 {「郡」： "id"： "4a"、 "series"：2011、 "open"：703.2、 "close"：409.3、 "high"：703.2、 "low"：409.3、 "mid"：470.4、 "tooltip" "イエロー"、 "id"： "5a"、 "シリーズ"：2011、 "オープン"：392.1、 "クローズ"：230.1、 "ハイ"：392.1 "ブラック"
率：470.4 "}、、 "low"：230.1、 "mid"：260.3、 "tooltip"： "Yellow
rate：260.3"}、 {"county"： "White"、 "id"： "6a"、 "series" "open"：495.5、 "close"：425.5、 "high"：495.5、 "low"：425.5、 "mid"：459.6、 "tooltip"： "White
率：4596 "}、 {" county "：" Green "、" id "：" 7a "、" series "：2011、" open "：750.9、" close "：414.4、" high "：750.9、" low " 418.4、 "mid"：478.2、 "tooltip"： "Green
率：478.2"}、 {"county"： "Purple"、 "id"： "8a"、 "series"：2011、 "open"：584.8 、 "close"：431.5、 "high"：584.8、 "low"：431.5、 "mid"：457.6、 "tooltip"： "Purple
rate：457.6"}、 {"county"： "Brown"、 "id "：" 9a "、" series "：2011、" open "：786.6、" close "：319.6、" high "：786.6、" low "：319.6、" mid "：452.1、" tooltip "：" Brown
rate ：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

Dojoの燭台のチャート - jsonのシリーズを更新する

答えて

関連する問題