jquery flot折線圖指導

我正在嘗試使用jquery flot顯示一個簡單的折線圖。我不知道我哪裏出了問題，但我不能得到任何觀點。這是我正在做的。jquery flot折線圖指導

var visits = <?php echo json_encode($visits); ?>; 
var views = <?php echo json_encode($pageViews); ?>; 
var dates = <?php echo json_encode($dates); ?>; 
$('#site_statistics').css({ 
    height: '180px', 
    width: '100%' 
}); 

$.plot($('#site_statistics'),[ 
     { label: 'Visits', data: visits }, 
     { label: 'Pageviews', data: views } 
    ], { 
    grid:{ 
     hoverable:true, 
     backgroundColor:'transparent' 
    }, 
    xaxis: { 
     mode: 'time', 
     timeformat:'%m/%d/%y', 
     minTickSize: [1,'day'], 
     min: (new Date(dates[0])).getTime(), 
     max: (new Date(dates[30])).getTime() 
    }, 
    yaxis: { 
     mode:'number', 
     tickSize:1, 
     min: 0, 
     tickColor:'#fff' 
    }, 
    legend: { 
     position:'ne', 
     backgroundOpacity:0 
    }, 
    series: { 
     lines: {show:true}, 
     points: {show:true} 
    } 
});

這是我得到的結果。

我已經驗證了我的陣列通過的console.log有數據（），所以出於某種原因（可能是一些簡單的我失蹤）插件不會將數據拉入圖。任何指導都會非常有幫助。

謝謝！

編輯

每請求，這是正在使用的意見

[{"09-20-2016":"2654"},{"09-21-2016":"2430"},{"09-22-2016":"2217"},{"09-23-2016":"2047"},{"09-24-2016":"2152"},{"09-25-2016":"2502"},{"09-26-2016":"2234"},{"09-27-2016":"2020"},{"09-28-2016":"1978"},{"09-29-2016":"2080"},{"09-30-2016":"1632"},{"10-01-2016":"1934"},{"10-02-2016":"2210"},{"10-03-2016":"2068"},{"10-04-2016":"1738"},{"10-05-2016":"1787"},{"10-06-2016":"1694"},{"10-07-2016":"1583"},{"10-08-2016":"1906"},{"10-09-2016":"1936"},{"10-10-2016":"2188"},{"10-11-2016":"1892"},{"10-12-2016":"2036"},{"10-13-2016":"1970"},{"10-14-2016":"2044"},{"10-15-2016":"2109"},{"10-16-2016":"2425"},{"10-17-2016":"2554"},{"10-18-2016":"2332"},{"10-19-2016":"2177"},{"10-20-2016":"723"}]

數據訪問

[{"09-20-2016":"1013"},{"09-21-2016":"871"},{"09-22-2016":"911"},{"09-23-2016":"845"},{"09-24-2016":"924"},{"09-25-2016":"1028"},{"09-26-2016":"877"},{"09-27-2016":"755"},{"09-28-2016":"793"},{"09-29-2016":"867"},{"09-30-2016":"747"},{"10-01-2016":"913"},{"10-02-2016":"1023"},{"10-03-2016":"971"},{"10-04-2016":"918"},{"10-05-2016":"793"},{"10-06-2016":"815"},{"10-07-2016":"813"},{"10-08-2016":"954"},{"10-09-2016":"1047"},{"10-10-2016":"1097"},{"10-11-2016":"938"},{"10-12-2016":"1022"},{"10-13-2016":"915"},{"10-14-2016":"1024"},{"10-15-2016":"1168"},{"10-16-2016":"1174"},{"10-17-2016":"1086"},{"10-18-2016":"1106"},{"10-19-2016":"1059"},{"10-20-2016":"364"}]

數據的日期

[["09-20-2016"],["09-21-2016"],["09-22-2016"],["09-23-2016"],["09-24-2016"],["09-25-2016"],["09-26-2016"],["09-27-2016"],["09-28-2016"],["09-29-2016"],["09-30-2016"],["10-01-2016"],["10-02-2016"],["10-03-2016"],["10-04-2016"],["10-05-2016"],["10-06-2016"],["10-07-2016"],["10-08-2016"],["10-09-2016"],["10-10-2016"],["10-11-2016"],["10-12-2016"],["10-13-2016"],["10-14-2016"],["10-15-2016"],["10-16-2016"],["10-17-2016"],["10-18-2016"],["10-19-2016"],["10-20-2016"]]

來源

2016-10-20 Action Coding

你介意張貼於被送入圖表日期，訪問和觀點一些示例數據？ – Sreekanth

我添加了正在使用的數據視圖 –

原來，該數據你的日期視圖部分的rmat與接受的格式不匹配。

$(document).ready(function() { 
 

 
    var viewsList = [{ 
 
    "09-20-2016": "2654" 
 
    }, { 
 
    "09-21-2016": "2430" 
 
    }, { 
 
    "09-22-2016": "2217" 
 
    }, { 
 
    "09-23-2016": "2047" 
 
    }, { 
 
    "09-24-2016": "2152" 
 
    }, { 
 
    "09-25-2016": "2502" 
 
    }, { 
 
    "09-26-2016": "2234" 
 
    }, { 
 
    "09-27-2016": "2020" 
 
    }, { 
 
    "09-28-2016": "1978" 
 
    }, { 
 
    "09-29-2016": "2080" 
 
    }, { 
 
    "09-30-2016": "1632" 
 
    }, { 
 
    "10-01-2016": "1934" 
 
    }, { 
 
    "10-02-2016": "2210" 
 
    }, { 
 
    "10-03-2016": "2068" 
 
    }, { 
 
    "10-04-2016": "1738" 
 
    }, { 
 
    "10-05-2016": "1787" 
 
    }, { 
 
    "10-06-2016": "1694" 
 
    }, { 
 
    "10-07-2016": "1583" 
 
    }, { 
 
    "10-08-2016": "1906" 
 
    }, { 
 
    "10-09-2016": "1936" 
 
    }, { 
 
    "10-10-2016": "2188" 
 
    }, { 
 
    "10-11-2016": "1892" 
 
    }, { 
 
    "10-12-2016": "2036" 
 
    }, { 
 
    "10-13-2016": "1970" 
 
    }, { 
 
    "10-14-2016": "2044" 
 
    }, { 
 
    "10-15-2016": "2109" 
 
    }, { 
 
    "10-16-2016": "2425" 
 
    }, { 
 
    "10-17-2016": "2554" 
 
    }, { 
 
    "10-18-2016": "2332" 
 
    }, { 
 
    "10-19-2016": "2177" 
 
    }, { 
 
    "10-20-2016": "723" 
 
    }]; 
 

 
    var visits = [{ 
 
    "09-20-2016": "1013" 
 
    }, { 
 
    "09-21-2016": "871" 
 
    }, { 
 
    "09-22-2016": "911" 
 
    }, { 
 
    "09-23-2016": "845" 
 
    }, { 
 
    "09-24-2016": "924" 
 
    }, { 
 
    "09-25-2016": "1028" 
 
    }, { 
 
    "09-26-2016": "877" 
 
    }, { 
 
    "09-27-2016": "755" 
 
    }, { 
 
    "09-28-2016": "793" 
 
    }, { 
 
    "09-29-2016": "867" 
 
    }, { 
 
    "09-30-2016": "747" 
 
    }, { 
 
    "10-01-2016": "913" 
 
    }, { 
 
    "10-02-2016": "1023" 
 
    }, { 
 
    "10-03-2016": "971" 
 
    }, { 
 
    "10-04-2016": "918" 
 
    }, { 
 
    "10-05-2016": "793" 
 
    }, { 
 
    "10-06-2016": "815" 
 
    }, { 
 
    "10-07-2016": "813" 
 
    }, { 
 
    "10-08-2016": "954" 
 
    }, { 
 
    "10-09-2016": "1047" 
 
    }, { 
 
    "10-10-2016": "1097" 
 
    }, { 
 
    "10-11-2016": "938" 
 
    }, { 
 
    "10-12-2016": "1022" 
 
    }, { 
 
    "10-13-2016": "915" 
 
    }, { 
 
    "10-14-2016": "1024" 
 
    }, { 
 
    "10-15-2016": "1168" 
 
    }, { 
 
    "10-16-2016": "1174" 
 
    }, { 
 
    "10-17-2016": "1086" 
 
    }, { 
 
    "10-18-2016": "1106" 
 
    }, { 
 
    "10-19-2016": "1059" 
 
    }, { 
 
    "10-20-2016": "364" 
 
    }]; 
 

 
    var dates = [ 
 
    ["09-20-2016"], 
 
    ["09-21-2016"], 
 
    ["09-22-2016"], 
 
    ["09-23-2016"], 
 
    ["09-24-2016"], 
 
    ["09-25-2016"], 
 
    ["09-26-2016"], 
 
    ["09-27-2016"], 
 
    ["09-28-2016"], 
 
    ["09-29-2016"], 
 
    ["09-30-2016"], 
 
    ["10-01-2016"], 
 
    ["10-02-2016"], 
 
    ["10-03-2016"], 
 
    ["10-04-2016"], 
 
    ["10-05-2016"], 
 
    ["10-06-2016"], 
 
    ["10-07-2016"], 
 
    ["10-08-2016"], 
 
    ["10-09-2016"], 
 
    ["10-10-2016"], 
 
    ["10-11-2016"], 
 
    ["10-12-2016"], 
 
    ["10-13-2016"], 
 
    ["10-14-2016"], 
 
    ["10-15-2016"], 
 
    ["10-16-2016"], 
 
    ["10-17-2016"], 
 
    ["10-18-2016"], 
 
    ["10-19-2016"], 
 
    ["10-20-2016"] 
 
    ]; 
 
    //Format the data into Flot compatabile data. 
 
    var viewData = []; 
 
    viewsList.forEach(function(views) { 
 
    for (var view in views) { 
 
     if (views.hasOwnProperty(view)) { 
 
     views[view] = parseInt(views[view], 10); 
 
     viewData.push([Date.parse(view), views[view]]); 
 
     } 
 
    } 
 
    }); 
 

 
    $('#site_statistics').css({ 
 
    height: '180px', 
 
    width: '99%' 
 
    }); 
 

 
    $.plot($('#site_statistics'), [{ 
 
    label: 'Pageviews', 
 
    data: viewData 
 
    }], { 
 
    grid: { 
 
     hoverable: true, 
 
     backgroundColor: 'transparent' 
 
    }, 
 
    xaxis: { 
 
     mode: 'time', 
 
     timeformat: '%m-%d-%y', 
 
     minTickSize: [1, 'day'], 
 
     min: (new Date(dates[0])).getTime(), 
 
     max: (new Date(dates[30])).getTime() 
 
    }, 
 
    yaxis: { 
 
     mode: 'number', 
 
     tickSize: 1000, 
 
     min: 0, 
 

 
     tickColor: '#fff' 
 
    }, 
 
    legend: { 
 
     position: 'ne', 
 
     backgroundOpacity: 0 
 
    }, 
 
    series: { 
 
     lines: { 
 
     show: true 
 
     }, 
 
     points: { 
 
     symbol: "circle", 
 
     fillColor: "#058DC7" 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script> 
 

 
<div id="site_statistics"></div>

來源

2016-10-20 18:40:55 Sreekanth

哪部分視圖數據是錯誤的？我刪除了日期格式，因此它的格式爲YYYMMDD。我是否仍然需要更改格式？ –

好吧，它的工作和線路顯示在鉻，但不是Firefox。還必須弄清楚什麼是與圖例混亂，因爲它看起來像我的截圖一樣。謝謝你的幫助！ –

有一個Date.parse方法，它不適用於Firefox，當日期格式是MM-DD-YYYY它應該是MM/DD/YYYY。這裏是codepen鏈接http://codepen.io/jsreekanth/pen/YGdzZP – Sreekanth

jquery flot折線圖指導

回答

相關問題