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

Question

我有一个 flot 线图，它正在从静态 java 脚本数组加载数据。

  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 应用程序中有一个 java url returns 这个 json。它非常相似，但不是 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指定为return类型，它会自动将其解析为Javascript对象。或者，您可以使用本机 JSON 对象来解析和字符串化数据。

你只有一个数据集（具有正确的属性），所以你可以简单地将它添加到一个数组中并提供给 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 加载

Flot line chart - How to change static value to load from ajax url

ajax

jquery

flot

编辑