在折线图中动态更改标签

时间:2011-05-02 15:52:09

标签: javascript json dojo

我从响应对象中的Web服务器获取以下JSON对象:

(JSON Array :[{"JUL":"5"},{"AUG":"7"},{"SEP":"9"},{"OCT":"11"},{"NOV":"13"},    {"DEC":"15"},{"JAN":"17"},{"FEB":"19"},{"MAR":"21"},{"APR":"23"},{"MAY":"25"},{"JUN":"27"}]) 

我正在数组

中获取JSON对象的键
var al_key = [];

//For loop for x axis dispaly.
alert("al_key.length --------->"+al_key.length);

var jsonObj = []; //declare array

for (var i = 0; i < al_key.length; i++) {
    jsonObj.push({value: i, text: al_key[i].value});
}

// Add axes
chart.addAxis("x", {min:1, max: 12 ,labels: jsonObj , fixLower: "major", microTicks: true, majorTickStep: 1});  

chart.addAxis("y", { min: 0, max: 50, vertical: true, fixLower: "major", fixUpper: "major", includeZero: true });

然而,它并没有像我期望的那样发挥作用。关于我错在哪里的任何建议?或者在x轴上动态显示月份的替代方法?提前感谢您的帮助。


作为问题编辑粘贴回复:

实际上我得到的JSONArray对象包含单个JSONObject,其中包含类似

的值

//服务器端编码..

JSONObject object=new JSONObject(); 
object.put("JAN":"17"); 
object.put("FEB":"19"); 
object.put("MAR":"21"); 
object.put("APR":"23"); 
object.put("MAY":"24"); 
object.put("JUN":"27");

JSONArray arrayObj=new JSONArray(); 
arrayObj.add(object);

On System.out.println(arrayObj); // our json appears like {"JAN":"17"},{"FEB":"19"},{"MAR":"21"},{"APR":"23"}, //{"MAY":"24"},{"JUN":"27"}];

关于jsp:

//Call to the database to fetch the desired value 
dojo.xhrGet( { url : "/POC/Action.do", 
               handleAs : "json", 
               sync: true, 
               load : function(response, ioArgs) { 
  alert("retrived response ------"+response); 
  for(var i in response) 
    for(var x in response[i]) 
      output.push(response[i][x]); 
  alert("Get value to draw line chart---------------------->"+output); 
},
error: function(response, ioArgs){ 
  dojo.byId("grid").innerHTML = "An error occurred, with response: " + response; 
  return response; 
}, 
handleAs: "json" });

响应对象包含返回值(JSONArray对象);

现在这个键需要显示在图表的x轴上。我是否需要再次获取密钥并准备以上述形式形成的json对象..

1 个答案:

答案 0 :(得分:1)

回复您的最新信息:

更改发送JSON的方式(基于可用的有限信息,我假设是使用org.jon包的Java servlet)

JSONArray array = new JSONArray();
arrayObj.put (new JSONObject("{'month':'JAN', 'value':'17'}");
// and repeat for the rest of the data

你可以在你的dojo图表中使用它,就像我在下面写的那样(jsonObj3)。


原始评论。

检查示例here,特别是部分:

labels: [{value: 0, text: "zero"},
         {value: 2, text: "two"},
         {value: 4, text: "four"} 

并添加两个系列

addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}).
addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}).

对于该系列,JSON可能是

var months = ["JUL","AUG","SEP","OCT","NOV","DEC","JAN","FEB","MAR","APR","MAY","JUN"];
var jsonObj2 = [];

for (var i = 0; i < months.length ; i++) {
    jsonObj2.push({value: i, text: months[i]});
}

如果您想要一个JSON对象,请尝试按如下方式排列:

var data = [{month: "JUL", value:"5"},
            {month: "AUG", value:"7"},
            {month: "SEP", value:"9"},
            {month: "OCT", value:"11"},
            {month: "NOV", value:"13"},    
            {month: "DEC", value:"15"},
            {month: "JAN", value:"17"},
            {month: "FEB", value:"19"},
            {month: "MAR", value:"21"},
            {month: "APR", value:"23"},
            {month: "MAY", value:"25"},
            {month: "JUN", value:"27"}];

var jsonObj3 = [];

for (var i = 0; i < data.length ; i++) {
    jsonObj3.push({value: i, text: data[i].month});
}