我正在使用 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 ,"close":471.5,"high":477,"low":471.5,"mid":474.2,"tooltip":"Orange
rate: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" }, {"县":"红色","id":"3","series":2012,"open":508.1,"close":481,"high":508.1,"low":481,"中”:494.4,"tooltip":"红
率:494.4"}, {"county":"Black","id":"4","series":2012,"open":503.2,"close":439.3," high":503.2,"low":439.3,"mid":470.4,"tooltip":"黑
率:470.4"}, {"county":"Yellow","id":"5","series": 2012,"open":492.1,"close":430.1,"high":492.1,"low":430.1,"mid":460.3,"tooltip":"黄色tooltip":"黑率:470.4"}, {"county":"Yellow","id":"5","series":2012,"open":492.1,"close":430.1,"high": 492.1,"low":430.1,"mid":460.3,"tooltip":"黄色tooltip":"黑率:470.4"}, {"county":"Yellow","id":"5","series":2012,"open":492.1,"close":430.1,"high": 492.1,"low":430.1,"mid":460.3,"tooltip":"黄色
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","series":2012,"open":484.8,"close":431.5,"high":484.8,"low":431.5,"mid":457.6,"tooltip":"Purple
rate:457.6"} , {"县":"棕色","id":"9","series":2012,"open":486.6,"close":419.6,"high":486.6,"low":419.6,"mid":452.1,"tooltip" :"
褐变率:452.1"}, {"county":"Orange","id":"1a","series":2011,"open":600,"close":481.5,"high":600, “低”:481.5,“中”:490.2,“工具提示”:“橙色5,"high":600,"low":481.5,"mid":490.2,"tooltip":"橙色5,"high":600,"low":481.5,"mid":490.2,"tooltip":"橙色
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":"Red","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","series":2011,"open":703.2,"close":409.3,"high":703.2,"low":409.3,"mid":470.4,"tooltip":"黑
率:470.4"} , {"县":"黄色","id":"5a","series":2011,"open":392.1,"close":230.1,"high":392.1,"low":230.1,"mid":260.3,"tooltip" :"黄
率:260.3"}, {"县":"白","id":"6a","series":2011,"open":495.5,"close":425.5,"high":495.5, “低”:425.5,“中”:459.6,“工具提示”:“白色5,"high":495.5,"low":425.5,"mid":459.6,"tooltip":"白色5,"high":495.5,"low":425.5,"mid":459.6,"tooltip":"白色
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","series":2011,"open":786.6,"close":319.6,"high":786.6,"low":319.6,"mid":452.1,"tooltip":"褐变
率:452.1"}
]}
所以,我一直在努力如何更新这个系列。应该如何格式化或写入更新序列的数据数组部分以获取正确的数据序列?
谢谢,任何帮助将不胜感激!