Question

我坚持使用datetime过滤器过滤条形图。.图表将基于我选择的日期时间进行渲染，并显示出条形图。但它一直向我显示默认查询。我的data.php有两个条件。

if($_POST["is_date_search"]!="yes")
{
$sql .='';//use today datetime
}

if($_POST["is_date_search"]=="yes")
{
$sql .='';//use $_POST['datetimepicker'] datetime
}

在我触发搜索按钮后，它会继续向我显示！='是'条件内的查询

降低我的代码

<input data-date-format="YYYY-MM-DD HH:mm:ss" type='text' class="form-control input-sm datetimepicker" id="datetimepicker" name="datetimepicker" />
<input type="button" name="search" id="search" value="Search" class="btn btn-info" />

<div id="portlet4" class="panel-collapse collapse in">
    <div class="portlet-body">
        <div id="chart-container">
            <canvas id="mycanvasStack"></canvas>
        </div>
    </div>
</div>

此处是脚本

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

    $('#datetimepicker').datetimepicker({
        format:'yyyy-mm-dd HH:mm:ss'
    });
    fetch_data('no');

    function fetch_data(is_date_search,datetimepicker='')
    {

    $.ajax({
        url: "data.php",
        async: false,
        dataType: 'json',
        type: "GET",
        data:{
            is_date_search:is_date_search, datetimepicker:datetimepicker
        },
        success: function(data) {
        console.log(data);
            var qty100 = [];
            var labelData = [];
            var process = [];

        for(var i in data) 
        {
            opername.push("PartGroup"+ data[i].opername);
            qty100.push(data[i].qty100);
            labelData.push(data[i].process);

        }

        $("mycanvasStack").remove();
        $("div.chart-container").append('<canvas id="mycanvasStack" class="animated fadeIn" height="150"></canvas>');

        var ctx = $("#mycanvasStack");

        var barGraph = new Chart(ctx, {
        type: 'bar',
        data:
        {
            labels: labelData,
            datasets: [{
                label: '0730-0930',
                data: qty100,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 2
            }]
        }
      });

        barGraph.render(); 
        barGraph.destroy();

        barGraph = new Chart(ctx, {
        type: 'bar',
        data:
        {
            labels: labelData,
            datasets: [{
                label: '07301-0930',
                data: qty100,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 2

            }]
        }
      });
    barGraph.render(); 
    },
    error: function(data) {
        console.log(data);
    }   

  });
}

    $('#search').click(function(){
        var start_date = $('.datetimepicker').val();
        if(start_date !='')
        {
            fetch_data('yes', start_date);
        }
    });

});
</script>

Answer 1

您已经发送了GET表单数据，但是您使用POST设置了条件，请修改ajax参数以发送POST数据：

$.ajax({
    url: "data.php",
    async: false,
    dataType: 'json',
    type: "POST",
    data:{
        is_date_search:is_date_search, datetimepicker:datetimepicker
    },

使用datetimepicker的chartjs条形图过滤器

1 个答案: