flot – 折线图错误

我试图用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时可能会遇到一些问题但是请先看看你如何使用它并报告回来。