Javascript 如何使flot.js graph显示当月的图表并存档其他月份的图表_Javascript_Graph_Flot

Javascript 如何使flot.js graph显示当月的图表并存档其他月份的图表

javascript graph

Javascript 如何使flot.js graph显示当月的图表并存档其他月份的图表,javascript,graph,flot,Javascript,Graph,Flot,通过ajax从数据库获取数据并显示在图形中的脚本 <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> <script language="javascrip

通过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>


变量d；
var-arr=[]；
//var d=[946699200000,315.71]、[949377600000,317.45]、[951969600000,317.50]、[957240000000,315.86]、[9520560000,314.93]、[98359200000,313.19]、[1033617600000,313.34]；
$（函数（）{
var数据；
$.ajax({
数据类型：“json”，
url:“query_sales.php”，
成功：功能（数据）{
//警报（数据）；
$。每个（数据、功能（i、项）{
arr.push（[item.datey，+item.bv]）；
}); 
d=arr；//JSON.stringify（arr）；
console.log（d）；//使用console.log进行调试
$.plot（“#占位符”，[d]{
xaxis：{
模式：“时间”，
//时间格式：“%I:%M%p”，
tickSize:[1，“天”]
///十二小时洛克：没错，
/*最低：1390780800000，
最大值：1390863600000*/
}，系列：{
行：{show:true}，
要点：{show:true}
},
网格：{
悬停：是的，
可点击：正确
},
亚克斯：{
最小值：0.01，
最高：1.12
}
});
}
});
$（文档）.ready（函数（）{
$（“#页脚”）.prepend（“Flot”+$.plot.version+”&ndash；，d）；
});
});

HTML

图表显示了从2015年12月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>


变量d；
var-arr=[]；
//var d=[946699200000,315.71]、[949377600000,317.45]、[951969600000,317.50]、[957240000000,315.86]、[9520560000,314.93]、[98359200000,313.19]、[1033617600000,313.34]；
$（函数（）{
var数据；
变量日期=新日期（）；
var firstDay=新日期（Date.getFullYear（），Date.getMonth（），1）；
var lastDay=新日期（Date.getFullYear（），Date.getMonth（）+1,0）；
var firstDayWithLashes=（firstDay.getFullYear（））+'/'+（firstDay.getMonth（）+1）+'/'+firstDay.getDate（）；
var lastDayWithSlashes=（lastDay.getFullYear（））+“/”+（lastDay.getMonth（）+1）+“/”+lastDay.getDate（）；
//上个月
函数monthDiff（d1、d2）{
var月；
月份=（d2.getFullYear（）-d1.getFullYear（））*12；
月份-=d1.getMonth（）+1；
月份+=d2.getMonth（）；
返回月份
<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>

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