Question

我有一个flot线图，它从静态javascript数组加载数据。

  d1 = [
    [1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 1129], 
    [1272672000000, 1163], [1275350400000, 1905], [1277942400000, 2002], [1280620800000, 2917], 
    [1283299200000, 2700], [1285891200000, 2700], [1288569600000, 2100], [1291161600000, 1700]
  ]

  d2 = [
    [1262304000000, 434], [1264982400000, 232], [1267401600000, 475], [1270080000000, 553],
    [1272672000000, 675], [1275350400000, 679], [1277942400000, 789], [1280620800000, 1026], 
    [1283299200000, 1640], [1285891200000, 1892], [1288569600000, 2147], [1291161600000, 2256]
  ]

  data = [{ 
    label: "Total visitors", 
    data: d1
  }, {
    label: "Total Sales",
    data: d2
  }]

  var holder = $('#line-chart')
  if (holder.length) {
    $.plot(holder, data, chartOptions )
  }

我的Web应用程序中有一个返回此json的java url。它非常相似，但不是100％采用相同的格式。

{"label":"This Year","data":[[1423659600000,28192],[1423746000000,33216],[1423832400000,31314],[1423918800000,22875],[1424005200000,20792],[1424091600000,20151],[1424178000000,22424]]}

我是否需要帮助我是否可以使用json绘制我的图形，并且我对ajax很新，需要一些帮助我如何运行ajax调用，将数据存储在变量中然后绘制图表。我需要调用ajax url并为图表上的每个系列绘制一次。

很抱歉要求这么多细节。但我有点迷失，因为我找不到很多关于如何做我想做的事情的例子。

修改

对于其他需要帮助的人，我设法通过做这样的事情来解决我的问题......

  fetchData(function (data) {
      console.log(data);
  });

function fetchData(callback) {

    $.when(fetchThisYearsData(), fetchLastYearsData()).done(function (dataThisYear, dataLastYear) {
        var data = [];
        data.push(dataThisYear[0]);
        data.push(dataLastYear[0]);
        callback(data);
    });
}



function fetchThisYearsData() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.getJSON( "service/tranAnalysis/tranCounts.json?siteId=1&yearOffset=0", function(json) {});     
}

function fetchLastYearsData() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.getJSON( "service/tranAnalysis/tranCounts.json?siteId=1&yearOffset=1", function(json) {})
}

Answer 1

那很好，我们都学习了一次！

但这就是为什么我不能给你一个完整的例子，你会学到更多。

对于Ajax，请使用JQuery或类似的库。它使事情变得更容易：

http://api.jquery.com/jquery.ajax/

如果将JSON指定为返回类型，它将自动将其解析为Javascript对象。或者，您可以使用本机JSON对象来解析＆amp; stringify data。

你只有一个数据集（具有正确的属性），所以你可以简单地将它添加到一个数组并提供像flot：

var data = [json_data];
var holder = $('#line-chart')
if (holder.length) {
   $.plot(holder, data, chartOptions);
}

如果您需要使用新数据集重绘图形：

data.push(new_json);
plot.setData(data);
plot.setupGrid(); //only necessary if your new data will change the axes or grid
plot.draw();

Flot折线图 - 如何更改静态值以从ajax url加载

修改

1 个答案: