jQuery Float折線圖指南

Question

我正在嘗試使用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"]]

Answer 1

原來，您在“視圖”部分中的日期格式與所接受的格式不符。

 $(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>