flot - line chart error

问题

I'm trying to plot a line graph using flot and I'm having some troubles. Admittedly I'm very new to flot.

My data array is loaded from ajax calls. I think I have the data in the right format but when my page loads I'm getting an error in jquery.flot.js.

Here is my javascript to load the float graph. I'm in particular looking for some advice on my x-axis specification. I don't think I have it specified right. i.e. I don't understand ticks and what they are in relation to the graph.

I've shown the json loaded from each call in the comments in the json functions.

thanks

$(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) {})
}

回答1:

The problem here is that $.getJSON is an async ajax function. It provides data to the callback. You are setting the callback but the data isn't going anywhere.

You can make the call synchronous by changing you getData functions to this:

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

I think there may also be some problems with your use of $.when but see how your go with this first and report back.

来源：https://stackoverflow.com/questions/28622272/flot-line-chart-error

标签

jquery

flot