1. 首页
  2. 问题列表
  3. Dojo阴阳烛图表-json更新系列
提问者：小点点

Dojo阴阳烛图表-json更新系列


我使用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）：

{“标识符”：“id”；
“标签”：“县”；
“项目”：[{“县”：“橙色”，“id”：“1”，“系列”：2012，“开放”：477，“关闭”：471.5，“高”：477，“低”：471.5，“中”：474.2，“工具提示”：“橙色
比率：474.2”}，{“县”：“蓝色”，“id”：“2”，“系列”：2012，“开放”：524.5，“关闭”：442.1，“高”：524.5，“低”：442.1，“中”：481.7，“工具提示”蓝色
比率：474.2“，{“县”；“红色”：“id”：“3”，“系列”：2012，“开放”：508.1，“关闭”：481，“高”：508.1，“低”：481，“中”：494.4，“工具提示”：“红色
比率：494.4”}，{“县”：“黑色”，“id”：“4”，“系列”：2012，“开放”：503.2，“关闭”：439.3，“高”：503.2，“低”：439.3，“中”：470.4，“工具提示”：“黑色
比率：470.4”}，{“县”：“黄”，“id”：“5”，“系列”：2012，“开放”：492.1，“关闭”：430.1，“高”：492.1，“低”：430.1，“中”：460.3，“工具提示”：黄色
比率：460.3}，{“县”：“白”，“id”：“6”，“系列”：2012，“开放”：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，“高”：484.8，“低”：431.5，“中”：457.6，“工具提示”：紫色
比率：457.6}，{“县”：“布朗”，“id”：“9”，“系列”：2012，“开放”：486.6，“关闭”：419.6，“高”：486.6，“低”：419.6，“中”：452.1，“工具提示”：“布朗
比率：452.1”}，{“县”：“橙色”，“id”：“1a”，“系列”：2011，“开放”：600，“关闭”：481.5，“高”：600，“低”：481.5，“中”：490.2，“工具提示”：“橙色
比率：450.2”}，{“县”：“蓝”，“id”：“2a”，“系列”：2011，“开放”：554.5，“关闭”：412.1，“高”：554.5，“低”：412.1，“中”：451.7，“工具提示”：“蓝
比率：451.7”}，{“县”：“红”，“id”：“3a”，“系列”：2011，“开放”：608.1，“关闭”：481，“高”：608.1，“低”：481，“中”：594.4，“工具提示”：“红
比率：474.4”}，{“县”：“黑”，“id”：“4a”，“系列”：2011，“开放”：703.2，“关闭”：409.3，“高”：703.2，“低”：409.3，“中”：470.4，“工具提示”：“黑
比率：470.4”}，{“县”：“黄”，“id”：“5a”，“系列”：2011，“开放”：392.1，“关闭”：230.1，“高”：392.1，“低”：230.1，“中”：260.3，“工具提示”：“黄
比率：260.3”，{“县”：“白”，“id”：“6a”，“系列”：2011，“开放”：495.5，“关闭”：425.5，“高”：495.5，“低”：425.5，“中”：459.6，“工具提示”：“白
比率：459.6”}，{“县”：“绿”，“id”：“7a”，“系列”：2011，“开放”：750.9，“关闭”：414.4，“高”：750.9，“低”：414，“中”：478.2，“工具提示”：“绿色
比率：478.2”}，{“县”：“紫色”，“id”：“8a”，“系列”：2011，“开放”：584.8，“关闭”：439.5，“高”：584.8，“低”：431.5，“中”：457.6，“工具提示”：紫色
比率：457.6}，{“县”：“棕色”，“id”：“9a”，“系列”：2011，“开放”：786.6，“关闭”：319.6，“高”：786.6，“低”：319.6，“中”：452.1，“工具提示”：棕色
比率：452.1}

]}

所以，我一直在努力更新这个系列。updateseries的数据数组部分应该如何格式化或写入以获取正确的数据系列？

谢谢，任何帮助都将不胜感激！


共1个答案

匿名用户

你最好的选择是使用商店和可观察的物体。这样，当存储更新时，数据会更新。

// 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"));

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS