不错 - 折线图错误

Question

我正在尝试使用 flot 绘制折线图，但遇到了一些麻烦。诚然，我对漂流很陌生。

我的数据数组是从 ajax 次调用中加载的。我想我的数据格式正确，但是当我的页面加载时，我在 jquery.flot.js.

中收到错误

这是我的 javascript 加载浮点图。我特别在寻找有关我的 x 轴规范的一些建议。我认为我没有正确指定它。即我不明白刻度以及它们与图表的关系。

我在 json 函数的注释中展示了从每次调用加载的 json。

感谢

$(function () {    
  var data, chartOptions
  fetchData(function (data) {
      console.log(data);
  });

  chartOptions = {
    xaxis: {
      mode: "time",
      timeformat: "%Y/%m/%d",
      tickSize: [1, "day"],
      tickLength: 0
    },
    yaxis: {

    },
    series: {
      lines: {
        show: true, 
        fill: false,
        lineWidth: 3
      },
      points: {
        show: true,
        radius: 3,
        fill: true,
        fillColor: "#ffffff",
        lineWidth: 2
      }
    },
    grid: { 
      hoverable: true, 
      clickable: false, 
      borderWidth: 0 
    },
    legend: {
      show: true
    },
    tooltip: true,
    tooltipOpts: {
      content: '%s: %y'
    },
    colors: ['#D74B4B', '#475F77', '#BCBCBC', '#777777', '#6685a4', '#E68E8E']
  }    

  var holder = $('#line-chart')

  if (holder.length) {
    $.plot(holder, data, chartOptions )
  }

})


function fetchData(callback) {

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

function fetchThisYearsData() {
    // returns {"label":"This Year","data":[[1423746000000,33216],[1423832400000,31314],[1423918800000,22875],[1424005200000,20795],[1424091600000,20151],[1424178000000,22448],[1424264400000,26996]]}
    return $.getJSON( "service/tranAnalysis/tranCounts.json?siteId=1&yearOffset=0", function(json) {});     
}

function fetchLastYearsData() {
    // returns {"label":"Last Year","data":[[1392469200000,21477],[1392555600000,18664],[1392642000000,19149],[1392728400000,20415],[1392814800000,24617],[1392901200000,30278],[1392987600000,28808]]}
    return $.getJSON( "service/tranAnalysis/tranCounts.json?siteId=1&yearOffset=1", function(json) {})
}

Answer 1

这里的问题是 $.getJSON 是一个异步 ajax 函数。它向回调提供数据。您正在设置回调，但数据无处可去。

您可以通过将 getData 函数更改为以下方式使调用同步：

return $.ajax({
  url: "service/tranAnalysis/tranCounts.json?siteId=1&yearOffset=0",
  dataType: 'json',
  async: false
});

我认为您对 $.when 的使用也可能存在一些问题，但请先查看您的使用情况并反馈。

不错 - 折线图错误

flot - line chart error

jquery

flot