使用 datetimepicker 的 chartjs 条形图过滤器答案

【问题标题】：chartjs bar chart filter using datetimepicker使用 datetimepicker 的 chartjs 条形图过滤器
【发布时间】：2019-04-01 03:31:25
【问题描述】：

我一直坚持使用日期时间过滤器过滤条形图。该图表将根据我选择的日期时间呈现，并将显示条形图。但它一直显示默认查询。

我的 data.php.. 中有两个条件。

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

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

在我触发搜索按钮后，它一直在 !='yes' 条件内向我显示查询。

这是我的代码：

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

【问题讨论】：

标签： javascript php mysql ajax chart.js

【解决方案1】：

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

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

【讨论】：

我之前尝试过，但变得更糟，它没有显示任何东西
至少条件现在应该可以工作了，因为您在请求和响应中都使用了POST 方法。你是什么意思它没有显示任何东西？是响应什么都不返回吗？
当我触发搜索但它没有显示图表时。但是当我将鼠标悬停在画布上时，它会显示默认结果，这是我使用特定数据搜索之前的结果。我的控制台返回空数组。
您还应该注意到$("mycanvasStack").remove(); 应该是$("#mycanvasStack").remove();（缺少#）
如果我输入 # 符号，此错误将出现在我的控制台 - 无法创建图表：无法从给定项目获取上下文