在日期范围滑块移动时更新折线图ChartJs的最佳方法是什么？

问题描述

我有来自数据库的数据，它们是日期，值和类型，如代码中所示。我希望在更改幻灯片日期范围时更新图表！

我正在使用具有数据示例的静态对象数组：

var res = [
  {
    id: 1,type: "Type 1",price: 1.4655,date: "2018-02-16T00:00:00"
  },{
    id: 2,type: "Type 2",price: 1.3454,{
    id: 3,type: "Type 3",price: 1.8985,{
    id: 4,date: "2018-02-19T00:00:00"
  },{
    id: 5,price: 1.2431,date: "2019-11-24T00:00:00"
  },{
    id: 6,price: 1.2424,{
    id: 7,price: 1.2751,date: "2019-11-25T00:00:00"
  },{
    id: 8,price: 1.3542,{
    id: 9,{
    id: 10,price: 1.9935,date: "2020-07-10T00:00:00"
  },{
    id: 11,price: 1.3385,{
    id: 12,price: 1.3402,date: "2020-07-11T00:00:00"
  },{
    id: 13,price: 1.1703,{
    id: 14,price: 1.3563,date: "2020-07-12T00:00:00"
  }
];
var deb = document.getElementById('debug');
var types = [...new Set(res.map(item => item.type))]; // Type 1,Type 2,Type 3
var filtered = res.filter(x => (moment(x.date).format("YYYY") === "2018" || moment(x.date).format("YYYY") === "2019" || moment(x.date).format("YYYY") === "2020") && (x.type === types[0] || x.type === types[1] || x.type === types[2]));

let s = filtered[0];

let e = filtered[filtered.length - 1];

var dt_from = moment(s.date).format('YYYY/MM/DD hh:mm:ss');
var dt_to = moment(e.date).format('YYYY/MM/DD hh:mm:ss');


var startYear = moment(dt_from).get('year');
var startMonth = moment(dt_from).get('month');

var monthDifference = moment(new Date(dt_to)).diff(new Date(dt_from),'months',true);

var labs = [];
for (var x = startMonth; x <= Math.round(monthDifference) + 1; x++) {
    labs.push(moment(startYear.toString()).week(1).add(x,'M').format("MMM YYYY"));
}

var ctx = document.getElementById("myChart");
function getData(typeF) { 
  return res.filter(x => (moment(x.date).format("YYYY") === "2018" || moment(x.date).format("YYYY") === "2019" || moment(x.date).format("YYYY") === "2020") && (x.type === typeF))
};

$('.slider-time').html(dt_from);
$('.slider-time2').html(dt_to);
var min_val = Date.parse(dt_from) / 1000;
var max_val = Date.parse(dt_to) / 1000;

function zeroPad(num,places) {
    var zero = places - num.toString().length + 1;
    return Array(+(zero > 0 && zero)).join("0") + num;
}
function formatDT(__dt) {
    var year = __dt.getFullYear();
    var month = zeroPad(__dt.getMonth() + 1,2);
    var date = zeroPad(__dt.getDate(),2);
    var hours = zeroPad(__dt.getHours(),2);
    var minutes = zeroPad(__dt.getMinutes(),2);
    var seconds = zeroPad(__dt.getSeconds(),2);
    return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
};

var FeedsChart = new Chart(ctx,{
  type: 'line',data: {
    labels: labs,datasets: [
    {
        label: types[0],fill: true,borderColor: "rgba(24,69,87,0.34)",backgroundColor: "rgba(129,189,173,0.2)",pointBackgroundColor: "rgba(24,pointBorderWidth: 0.1,pointBorderColor: 'rgba(0,0.1)',pointHoverBackgroundColor: "rgba(121,137,186,1)",data: getData(types[0]).map(item => ({ x: moment(item.date),y: item.price }))
    },{
        label: types[1],borderColor: "rgba(42,94,16,0.37)",backgroundColor: "rgba(189,187,2,pointBackgroundColor: "rgba(42,data: getData(types[1]).map(item => ({ x: moment(item.date),{
        label: types[2],orderColor: "rgba(189,9,0.74)",backgroundColor: "rgba(214,72,64,pointBackgroundColor: "rgba(189,data: getData(types[2]).map(item => ({ x: moment(item.date),y: item.price }))
    }
  ]
  },options: {
        responsive: true,title: {
            display: false
        },legend: {
            display: true
        },scales: {
            xAxes: [{
                type: 'time',gridLines: {
                    display: true
                },time: {
                    unit: 'month'
                },ticks: {
                    source: 'labels'
                },bounds: 'data',}],yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
   
})
$("#slider-range").slider({
  range: true,min: min_val,max: max_val,step: 10,values: [min_val,max_val],slide: function (e,ui) {
      var dt_cur_from = new Date(ui.values[0] * 1000); //.format("yyyy-mm-dd hh:ii:ss");
      $('.slider-time').html(formatDT(dt_cur_from));

      var dt_cur_to = new Date(ui.values[1] * 1000); //.format("yyyy-mm-dd hh:ii:ss");                
      $('.slider-time2').html(formatDT(dt_cur_to));
  }

});

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Slider</title>

  <link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
</head>
<body>
<p style="text-align: center"><span class="slider-time"></span> - <span class="slider-time2"></span></p>
  <canvas height="130" id="myChart"></canvas>
  <div style="padding: 0 20px" class="sliders_step1">
     <div id="slider-range"></div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</body>
</html>

我添加了一个带有跨度的p标签，该跨度显示数据范围，并且随着您移动滑块而更新

任何提示或帮助将不胜感激

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）