浮動-折線圖錯誤

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的使用可能還會出現一些問題，但是請先了解如何使用$。並進行報告。