Question

我正在尝试使用flot绘制折线图，但我遇到了一些麻烦。不可否认，我很陌生。

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

enter image description here

这是我加载浮动图的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 - 折线图错误

1 个答案: