javascript - Chart.js 使用按钮选择器更新开始日期

Question

一直在尝试向我的图表添加范围选择器。

这是我添加到我的 php 文件中的内容。

  <div id="range-selector">
    <input type="button" id="30m" class="period ui-button" value="30m" />
    <input type="button" id="1h" class="period ui-button" value="1h"/>
    <input type="button" id="6h" class="period ui-button" value="6h"/>
    <input type="button" id="12h" class="period ui-button" value="12h"/>
    <input type="button" id="24h" class="period ui-button" value="24h"/>
  </div>

这是我的 chart.js 文件

var fanspeedlabels = [], fanspeed = [], temp = [];



function updateFanSpeedData() {


    function formatDate(itemdate) {
        return moment(itemdate).format("MMM Do HH:mm");
    }

    $.ajax({
        url: 'api.php?getFanSpeed24hrs&PHP',
        dataType: 'json'
    }).done(function (results) {

        results.forEach(function (packet) {
            if (fanspeedlabels.indexOf(formatDate(packet.start_time)) === -1) {
                fanspeedlabels.push(formatDate(packet.start_time));
                fanspeed.push(parseFloat(packet.fanspeed));
                temp.push(parseFloat(packet.temp));

            }

        });
        fanspeedChart.update();
        fanspeeddata = results;
    });
}


setInterval(function () {
    // console.log('updateFanSpeedData');
//    updateFanSpeedData();
}, 6000);


var fanspeedChartctx = document.getElementById("fanspeedChart");
var newfanspeed = fanspeed + "%";
var fanspeedChart = new Chart(fanspeedChartctx, {
    type: 'line',
    data: {
        labels: fanspeedlabels,
        datasets: [{
            label: 'FanSpeed',
            data: fanspeed,
            backgroundColor: 'rgb(60, 141, 188)',
            fill: false,
            borderColor: 'rgb(60, 141, 188)',
            borderWidth: 1,
            cubicInterpolationMode: 'monotone',
            yAxisID: "y-axis-1"
        },
            {
                label: 'Temp',
                data: temp,
                backgroundColor: 'rgba(255, 99, 132, 1)',
                fill: false,
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1,
                yAxisID: "y-axis-1"
            }

        ]
    },
    options: {
        hover: {
            animationDuration: 0 // duration of animations when hovering an item
        },
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                display: true,
                position: "left",
                id: "y-axis-1",
                ticks : {
                    min: 0,
                    max: 100
                }
            },
                {
                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: "right",
                    id: "y-axis-2",
                    ticks : {
                        min: 0,
                        max: 100
                    }
                }
            ],
            xAxes: [
                {
                    display: true,
                    scaleLabel: {
                        display: true
                    },
                    ticks: {
                        maxRotation: 0,
                        minRotation: 0
                    }
                }
            ]
        },
        tooltips: {
            enabled: true,
            mode: "x-axis",
            intersect: false,
            callbacks: {
                label: function(t, d) {
                    var xLabel = d.datasets[t.datasetIndex].label;
                    var yLabel = t.yLabel;
                    if(t.datasetIndex === 0) {
                        return 'Fan Speed: ' + yLabel.toFixed(0) + '%';
                    }
                    else if (t.datasetIndex === 1) {
                        return 'CPU Temp: ' + yLabel.toFixed(0) + '°C';
                    }
                }
            }
        }
    }
});

$(".period").click( function() {
  var period = this.id;
  minValue = new Date();
  switch(period){
    case "30m":
      minValue.setMinutes(minValue.getMinutes() - 30);
      break;
    case "1h":
      minValue.setHours(minValue.getHours() - 1);
      break;
    case "6h":
      minValue.setHours(minValue.getHours() - 6);
      break;
    case "12h":
      minValue.setHours(minValue.getHours() - 12);
      break;
    case "24h":
      minValue.setHours(minValue.getHours() - 24);
      break;
    default:
      minValue
    }
    var startdate = moment(minValue).format("MMM Do HH:mm");
    fanspeedChart.options.scales.xAxes[0].ticks.max = startdate;
    fanspeedChart.update();
});
updateFanSpeedData();

这些按钮有效，确实有一个 console.log 并且日期当前发生了变化，但它不会使用当前起点更新图表。

任何帮助都会很棒，开始觉得我要倒退了。

更新我发现的东西

因为我已经挖得更深了。该代码似乎有效，但因为“开始日期”不等于数据库中的确切日期，所以它不起作用。如果有机会在数据库中有相同的日期，它就可以工作。有没有办法可以做到，所以如果有任何高于此日期的日期添加。日期显示为“Feb 16 19:50”。如果将 min 设置为“Feb 16 19:49”，它将不起作用。也尝试过建议的Min

标签： javascriptchart.js

Answer 1

正如我所计算的那样，由于最小值与我数据库中的任何日期都不匹配，因此需要一种方法来获取与所提供日期最接近的日期。

添加了这个，现在一切都很好。

    let closest = Infinity;

    fanspeedlabels.forEach(function(d) {
        const date = new Date(d);

        if (date >= now && (date < new Date(closest) || date < closest)) {
           closest = d;
        }
    });
    fanspeedChart.options.scales.xAxes[0].ticks.min = closest;
    fanspeedChart.update();