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

问题描述

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

How to get date picker in chart.js chart to get historical data with in the selected range of date from the client side.

如果我在后端提供查询，它会给出一个图表，但是如果我是从客户端(即从前端)给出的，则它不会发送该图表.它使用选定日期的JSON数据进行回复

If I give a query in the backend it gives a chart but if I give from client side i.e. from front end it doesn't send the chart. It replies with the JSON data for selected dates

推荐答案

Chart.js没有用于datetimepicker的插件.我建议您使用eonasdan datetimepicker .一个间隔需要两个选择器.成功实现这些之后，您需要为用户输入(客户端)到服务器端$ _POST或$ _GET输入的 form .您需要在HTML-Doc的标题中引用使用的库.

Chart.js has no plugin for a datetimepicker. I recommend you the eonasdan datetimepicker. For an interval two pickers are needed. After a succesful implementation of these you need a form for the userinputs (client side) to $_POST or $_GET inputs to your server side. You need to refer the used librarys in the header of your HTML-Doc.

HTML

(可选，您可以添加一些bootstrap-glyphicons):

(optional you can add some 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

JavaScriptcreate a new JS-file and use jQuery and EONASDAN

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

我猜您查询数据库以获取图表数据.因此，您需要根据日期选择器的用户输入来查询数据库.然后，将结果数据存储在数组中并将其转换为JSON:

I guess you query a database to get the chartdata. So you need to query your database in dependence to the userinputs of the datepickers. Afterwards, store the resulting data in an array and convert them to a JSON:

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

请记住，此代码只是一个示例，需要嵌入您自己的代码中！！

Keep in mind that this code is only an example and needed to embed in your own code!!!

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

Do you use Ajax for server/client communication?

这篇关于在图表js中如何获取日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！