为什么更改我的轴（moment.js）的时间值？

问题描述 投票：0回答：1

我正在使用chart.js和moment.js来显示以x-axis为时间的图表。

我在绘制此轴时遇到一些问题，我问了this question。

@ uminder解决了。这是他的代码，

var sData = {
  datasets: [{
    label: 'Dataset1',
    data: [{
        x: '09:00',
        y: 88
      }, {
        x: '09:10',
        y: 89
      }, {
        x: '09:13',
        y: 86
      }, {
        x: '09:23',
        y: 86
      },
      {
        x: '09:26',
        y: 85
      }, {
        x: '09:29',
        y: 83
      }
    ]
  }, {
    label: 'Dataset2',
    data: [{
        x: '09:02',
        y: 88
      }, {
        x: '09:13',
        y: 89
      }, {
        x: '09:14',
        y: 86
      }, {
        x: '09:20',
        y: 86
      },
      {
        x: '09:24',
        y: 85
      }, {
        x: '09:29',
        y: 83
      }
    ]
  }]
}

sData.datasets[0].data = formatData(sData.datasets[0].data)
sData.datasets[1].data = formatData(sData.datasets[1].data)

function formatData(oldData) {
  var newData = []
  for (var i = 0; i < oldData.length; i++) {
    var currentData = {}
    currentData.x = moment(oldData[i].x, "HH:mm")
    currentData.y = oldData[i].y
    newData.push(currentData)
  }
  return newData
}

var options = {
  responsive: true,
  scales: {
    xAxes: [{
      type: 'time',
    }]
  },
  tooltips: {
    callbacks: {
      title: (tooltipItem, data) => moment(tooltipItem[0].label).format('HH:mm')
    }
  }
}

var ctx = document.getElementById('bateria_graf').getContext('2d');
let chart = new Chart(ctx, {
  type: 'line',
  data: sData,
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="bateria_graf"></canvas>

问题是当我执行代码片段时，x-axis的显示如下图所示，

enter image description here

当我将他的解决方案粘贴到程序中时，如下图所示，

enter image description here

并且当我通过自己的datasets时，看起来是这样，

enter image description here

为什么格式经常更改？为什么显示今天的日期？我只想要[H]为24H格式。

我正在传递的第三张图像中的hour:minute就是这样，

datatsets
javascript chart.js momentjs
1个回答
2
投票

要强制图表始终以所需格式显示时间单位，您可以按以下方式定义[{ 'label': 'Node1', 'borderColor': '#4c59b4', 'data': [{'x': '12:22', 'y': 86}, {'x': '12:32', 'y': 86}, {'x': '12:43', 'y': 85}, {'x': '12:53', 'y': 85}] }, { 'label': 'Node2', 'borderColor': '#786f91', 'data': [{'x': '09:08', 'y': 86}, {'x': '09:19', 'y': 86}, {'x': '09:29', 'y': 86}, {'x': '09:39', 'y': 86}, {'x': '09:49', 'y': 86}, {'x': '10:00', 'y': 86}, {'x': '10:10', 'y': 86}, {'x': '10:20', 'y': 86}, {'x': '10:30', 'y': 86}, {'x': '10:40', 'y': 86}, {'x': '10:51', 'y': 86}, {'x': '11:01', 'y': 86}, {'x': '11:11', 'y': 86}, {'x': '11:21', 'y': 86}, {'x': '11:31', 'y': 86}, {'x': '11:42', 'y': 86}, {'x': '11:52', 'y': 86}, {'x': '12:02', 'y': 86}, {'x': '12:12', 'y': 86}, {'x': '12:22', 'y': 86}, {'x': '12:32', 'y': 86}, {'x': '12:42', 'y': 86}, {'x': '12:52', 'y': 86}, {'x': '13:03', 'y': 86}, {'x': '13:13', 'y': 86}, {'x': '13:24', 'y': 86}, {'x': '13:34', 'y': 86}, {'x': '13:44', 'y': 86}, {'x': '13:54', 'y': 86}, {'x': '14:04', 'y': 86}, {'x': '14:14', 'y': 86}, {'x': '14:24', 'y': 86}, {'x': '14:35', 'y': 86}, {'x': '14:45', 'y': 86}, {'x': '14:55', 'y': 86}, {'x': '15:05', 'y': 87}, {'x': '15:16', 'y': 87}, {'x': '15:26', 'y': 87}, {'x': '15:46', 'y': 87}, {'x': '16:07', 'y': 87}, {'x': '16:17', 'y': 87}, {'x': '16:27', 'y': 87}] }] 。

time unit

注意，时间单位xAxes: [{ type: 'time', time: { unit: 'minute' } }] 的默认display format为'minute'（即“ 11:44 am”）。如果要定义其他格式，则可以使用'h:mm a'进行定义。 

displayFormats

这将导致以下可运行的代码片段：

xAxes: [{
      type: 'time',
      time: {
        displayFormats: {
          minute: 'h:mm'
        }
      }      
    }]

var sData = {
  datasets: [{
    'label': 'Node1',
    'borderColor': '#4c59b4',
    'data': [{'x': '12:22', 'y': 86}, {'x': '12:32', 'y': 86}, {'x': '12:43', 'y': 85}, {'x': '12:53', 'y': 85}]
  }, {
    'label': 'Node2',
    'borderColor': '#786f91',
    'data': [{'x': '09:08', 'y': 86}, {'x': '09:19', 'y': 86}, {'x': '09:29', 'y': 86}, {'x': '09:39', 'y': 86}, {'x': '09:49', 'y': 86}, {'x': '10:00', 'y': 86}, {'x': '10:10', 'y': 86}, {'x': '10:20', 'y': 86}, {'x': '10:30', 'y': 86}, {'x': '10:40', 'y': 86}, {'x': '10:51', 'y': 86}, {'x': '11:01', 'y': 86}, {'x': '11:11', 'y': 86}, {'x': '11:21', 'y': 86}, {'x': '11:31', 'y': 86}, {'x': '11:42', 'y': 86}, {'x': '11:52', 'y': 86}, {'x': '12:02', 'y': 86}, {'x': '12:12', 'y': 86}, {'x': '12:22', 'y': 86}, {'x': '12:32', 'y': 86}, {'x': '12:42', 'y': 86}, {'x': '12:52', 'y': 86}, {'x': '13:03', 'y': 86}, {'x': '13:13', 'y': 86}, {'x': '13:24', 'y': 86}, {'x': '13:34', 'y': 86}, {'x': '13:44', 'y': 86}, {'x': '13:54', 'y': 86}, {'x': '14:04', 'y': 86}, {'x': '14:14', 'y': 86}, {'x': '14:24', 'y': 86}, {'x': '14:35', 'y': 86}, {'x': '14:45', 'y': 86}, {'x': '14:55', 'y': 86}, {'x': '15:05', 'y': 87}, {'x': '15:16', 'y': 87}, {'x': '15:26', 'y': 87}, {'x': '15:46', 'y': 87}, {'x': '16:07', 'y': 87}, {'x': '16:17', 'y': 87}, {'x': '16:27', 'y': 87}]
  }]
}

sData.datasets[0].data = formatData(sData.datasets[0].data)
sData.datasets[1].data = formatData(sData.datasets[1].data)

function formatData(oldData) {
  var newData = []
  for (var i = 0; i < oldData.length; i++) {
    var currentData = {}
    currentData.x = moment(oldData[i].x, "HH:mm")
    currentData.y = oldData[i].y
    newData.push(currentData)
  }
  return newData
}

var options = {
  responsive: true,
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'minute'
      }
    }]
  },
  tooltips: {
    callbacks: {
      title: (tooltipItem, data) => moment(tooltipItem[0].label).format('HH:mm')
    }
  }
}

var ctx = document.getElementById('bateria_graf').getContext('2d');
let chart = new Chart(ctx, {
  type: 'line',
  data: sData,
  options: options
});

UPDATE

<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.min.js"></script> <canvas id="bateria_graf"></canvas>对这个答案发表了以下评论：

（...）我不明白为什么要在今天的时间之前进行打印。这令人困惑，因为我的信息不是从今天开始（...）。

原因是在上面的代码中，时间是使用NEA解析的。

Moment.js

当解析的字符串不包含有关日期的信息时，moment(oldData[i].x, "HH:mm") 假定它为当前日期。它必须作一个假设，因为解析的对象基本上是Moment.js的包装器。请运行下面的代码片段并检查控制台输出。 

Date
const m = moment("11:44", "HH:mm");
console.log(m);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.