浮点图-折线图错误 [英] flot - line chart error

问题描述

我正在尝试使用flot绘制折线图，​​但遇到了一些麻烦.诚然，我是新手.

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

我的数据数组是从ajax调用加载的.我认为我的数据格式正确，但是当页面加载时，jquery.flot.js中出现错误.

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.

这是我的JavaScript，用于加载浮动图.我特别想在我的X轴规格上寻求一些建议.我认为我没有指定正确的权限.即我不了解刻度线以及它们与图表的关系.

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.

我已经在json函数的注释中显示了每次调用加载的json.

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

谢谢

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

推荐答案

此处的问题是$ .getJSON是异步ajax函数. 它向回调提供数据. 您正在设置回调，但数据不会流向任何地方.

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.

您可以通过将getData函数更改为此来使调用同步:

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.

这篇关于浮点图-折线图错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！