Question

如何在chart.js图表中获取日期选择器，以便从客户端获取所选日期范围内的历史数据。

如果我在后端给出一个查询，它会给出一个图表，但如果我从客户端给出，即从前端给出它不发送图表。它回复了所选日期的JSON数据

Answer 1

Chart.js没有datetimepicker的插件。我推荐你eonasdan datetimepicker。对于一个间隔，需要两个拣选者。成功实施这些后，您需要为用户输入（客户端）提供表单到服务器端的$ _POST或$ _GET输入。您需要在HTML-Doc的标题中引用使用过的库。

<强> HTML

（可选你可以添加一些bootstrap-glyphicons）：

<form id="dates" method="post">
  <div class="form-group">
    <div class='input-group date' id='startinterval'>
      <input id="start" type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
  <div class="form-group">
    <div class='input-group date' id='endinterval'>
      <input id="end" type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</form>

<强>的JavaScript 创建一个新的JS文件并使用jQuery和EONASDAN

$( document ).ready(function() {
    $('#startinerval').datetimepicker({
          //specify your datetimepicker
    });
    $('#endinterval').datetimepicker({
          //specify your datetimepicker
    });  
});

我猜您查询数据库以获取chartdata。因此，您需要根据datepickers的用户输入查询数据库。然后，将结果数据存储在一个数组中并将它们转换为JSON：

$data = array('xaxis' => $xaxis, 'yaxis' => $yaxis);
json_encode($data);

请注意，此代码只是一个示例，需要嵌入您自己的代码中!!!

您是否使用Ajax进行服务器/客户端通信？

在Chart js中如何获取日期选择器

1 个答案: