1

ローソク足チャートを作成するために Dojo ツールキットを使用しています。ユーザーがボタンをクリックしてデータの年を選択すると、ローソク足チャートが更新される、年ごとのさまざまな一連のデータがあります。コードに直接データがある場合、これを正常に実行できました。

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":2012,"open":477 ,"close":471.5,"high":477,"low":471.5,"mid":474.2,"tooltip":"オレンジ
率:474.2"}, {"county":"Blue","id": "2","series":2012,"open":524.5,"close":442.1,"high":524.5,"low":442.1,"mid":481.7,"tooltip":"青色
率:481.7" }, {"county":"Red","id":"3","series":2012,"open":508.1,"close":481,"high":508.1,"low":481,"中間":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
rate:470.4"}, {"county":"Yellow","id":"5","series": 2012、"オープン":492.1、"クローズ":430.1、"高":492.1、"低":430.1、"中":460.3、"ツールヒント":"黄色tooltip":"Black rate:470.4"}, {"county":"Yellow","id":"5","series":2012,"open":492.1,"close":430.1,"high": 492.1、"低":430.1、"中":460.3、"ツールヒント":"黄色tooltip":"Black rate:470.4"}, {"county":"Yellow","id":"5","series":2012,"open":492.1,"close":430.1,"high": 492.1、"低":430.1、"中":460.3、"ツールヒント":"黄色
rate:460.3"}, {"county":"White","id":"6","series":2012,"open":495.5,"close":425.5,"high":495.5,"low" :425.5,"mid":459.6,"tooltip":"ホワイト
率:459.6"}, {"county":"Green","id":"7","series":2012,"open":550.9, "close":414.4,"high":550.9,"low":414.4,"mid":478.2,"tooltip":"Green
rate:478.2"}, {"county":"Purple","id":" 8","系列":2012,"始値":484.8,"終値":431.5,"高値":484.8,"安値":431.5,"中値":457.6,"ツールヒント":"紫
率:457.6"} , {"郡":"Brown","id":"9","series":2012,"open":486.6,"close":419.6,"high":486.6,"low":419.6,"mid":452.1,"tooltip" :"ブラウン
率:452.1"}, {"county":"オレンジ","id":"1a","series":2011,"open":600,"close":481.5,"high":600, "low":481.5,"mid":490.2,"tooltip":"オレンジ5,"高":600,"低":481.5,"中":490.2,"ツールヒント":"オレンジ5,"高":600,"低":481.5,"中":490.2,"ツールヒント":"オレンジ
rate:450.2"}, {"county":"Blue","id":"2a","series":2011,"open":554.5,"close":412.1,"high":554.5,"low" :412.1,"mid":451.7,"tooltip":"青色
率:451.7"}, {"county":"赤色","id":"3a","series":2011,"open":608.1, "close":481,"high":608.1,"low":481,"mid":594.4,"tooltip":"Red
rate:474.4"}, {"county":"Black","id":" 4a","シリーズ":2011,"始値":703.2,"終値":409.3,"高値":703.2,"低値":409.3,"中値":470.4,"ツールヒント":"ブラック
率:470.4"} , {"郡":"Yellow","id":"5a","series":2011,"open":392.1,"close":230.1,"high":392.1,"low":230.1,"mid":260.3,"tooltip" :"イエロー
レート:260.3"}, {"county":"ホワイト","id":"6a","series":2011,"open":495.5,"close":425.5,"high":495.5, "low":425.5,"mid":459.6,"tooltip":"白5,"高":495.5,"低":425.5,"中":459.6,"ツールチップ":"白5,"高":495.5,"低":425.5,"中":459.6,"ツールチップ":"白
rate:459.6"}, {"county":"Green","id":"7a","series":2011,"open":750.9,"close":414.4,"high":750.9,"low" :414.4,"mid":478.2,"tooltip":"グリーン
率: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","シリーズ":2011,"開":786.6,"終値":319.6,"高":786.6,"低":319.6,"中":452.1,"ツールチップ":"ブラウン
率:452.1"}

]}

ということで、連載の更新をどうするかで悩んでいます。正しい一連のデータを取得するには、updateseries のデータ配列部分をどのようにフォーマットまたは書き込む必要がありますか?

ありがとう、どんな助けでも大歓迎です！

4

1 に答える 1

0

あなたの最善の策は、ストアと 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-15T16:48:20.407 に答える