如何制作flot.js图表​​显示当月的图表并归档另一个

Question

通过数据库中的ajax获取数据并以图形显示的脚本

<script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.time.js"></script>
    <script type="text/javascript">
   var d;
var arr = [];

//var d = [[946699200000, 315.71], [949377600000, 317.45], [951969600000, 317.50], [957240000000, 315.86], [952056000000, 314.93], [983592000000, 313.19], [1033617600000, 313.34]];

$(function() {
    var data;
    $.ajax({
        dataType: "json",
        url: 'query_sales.php',
        success: function(data){
            //alert(data);
            $.each(data, function(i, item) {
                arr.push([item.datey, +item.bv]);
            }); 
            d = arr; //JSON.stringify(arr);
            console.log(d); // use console.log to debug

            $.plot("#placeholder", [d], {
                xaxis: {
                mode: "time",
                //timeformat: "%I:%M %p",
                tickSize: [1, "day"]
                ///twelveHourClock: true,
                /*min: 1390780800000,
                max: 1390863600000*/
                }, series: {
                  lines: { show: true },
                  points: { show: true }
                },
                grid: { 
                  hoverable: true, 
                  clickable: true 
                },
                 yaxis:{
                min: 0.01,
                max: 1.12 
              }
            });

        }
    });
     $(document).ready(function () {
      $("#footer").prepend("Flot " + $.plot.version + " &ndash; ", d);
   });
});
    </script>

HTML

 <div id="content">

        <div class="demo-container">
            <div id="placeholder" class="demo-placeholder"></div>
        </div>

    </div>

图表显示了从2015年12月1日到现在这样的数据：显然销售没有增加，这就是为什么它是平的，但数字有点混乱。为了避免这种情况并显示干净的图表，我希望能够在图表中显示当前月份数据以及存档中的其他月份。因此，当他们选择特定月份时，会出现该月份的图表。

Answer 1

脚本

<script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.time.js"></script>
    <script type="text/javascript">
   var d;
var arr = [];

//var d = [[946699200000, 315.71], [949377600000, 317.45], [951969600000, 317.50], [957240000000, 315.86], [952056000000, 314.93], [983592000000, 313.19], [1033617600000, 313.34]];

$(function() {
var data;
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

var firstDayWithSlashes = (firstDay.getFullYear()) + '/' + (firstDay.getMonth() + 1) + '/' + firstDay.getDate();
var lastDayWithSlashes = (lastDay.getFullYear()) + '/' + (lastDay.getMonth() + 1) + '/' + lastDay.getDate();

//prev months
function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}

    d1 = new Date('2015/12/01');
    d2 = new Date(firstDayWithSlashes);
    //alert(monthDiff(d1, d2));//number of months elapsed until current month


    var data;
    $.ajax({
        dataType: "json",
        url: 'query_sales.php',
        success: function(data){
            //alert(data);
            $.each(data, function(i, item) {
                arr.push([item.datey, +item.bv]);
            }); 
            d = arr; //JSON.stringify(arr);
            console.log(d); // use console.log to debug

            $.plot("#placeholder", [d], {
                xaxis: {
                mode: "time",
                //timeformat: "%I:%M %p",
                //tickSize: [1, "day"]
                ///twelveHourClock: true,
                /*min: 1390780800000,
                max: 1390863600000*/

                 min: (new Date(firstDayWithSlashes)).getTime(),
                 max: (new Date(lastDayWithSlashes)).getTime()
                }, series: {
                  lines: { show: true },
                  points: { show: true }
                },
                grid: { 
                  hoverable: true, 
                  clickable: true 
                },
                 yaxis:{
                min: 0.01,
                max: 1.12 
              }
            });

        }
    });
    $("#firstRec").click(function () {
            $.plot("#placeholder", [d], {
                xaxis: {
                    mode: "time",
                    min: (new Date('2015/12/01')).getTime(),
                    max: (new Date('2015/12/31')).getTime()
                }
            });
        });
     $count = 0;
 $("#prevRec").click(function () {
        $count++;
        var month = date.getMonth()-$count;
        var firstDay = new Date(date.getFullYear(), month, 1);
        var lastDay = new Date(date.getFullYear(), month + 1, 0);

        var firstDayWithSlashes2 = (firstDay.getFullYear()) + '/' + (firstDay.getMonth() + 1) + '/' + firstDay.getDate();
        var lastDayWithSlashes2 = (lastDay.getFullYear()) + '/' + (lastDay.getMonth() + 1) + '/' + lastDay.getDate();

        $.plot("#placeholder", [d], {
                xaxis: {
                    mode: "time",
                    min: (new Date(firstDayWithSlashes2)).getTime(),
                    max: (new Date(lastDayWithSlashes2)).getTime()
                }
            });
 });    
    $("#currentRec").click(function () {
            $.plot("#placeholder", [d], {
                xaxis: {
                    mode: "time",
                     min: (new Date(firstDayWithSlashes)).getTime(),
                    max: (new Date(lastDayWithSlashes)).getTime()
                }
            });
        });
     $(document).ready(function () {
      $("#footer").prepend("Flot " + $.plot.version + " &ndash; ", d);
     });
});
    </script>

HTML

<div id="content">

        <div class="demo-container">
            <div id="placeholder" class="demo-placeholder"></div>
        </div>
        <button id="firstRec">Fist Record</button>
        <button id="prevRec">Prev Month</button>
        <button id="currentRec">Current Month</button>
    </div>

现在看起来像下面的导航按钮：