Moment 和 ChartJS 时间格式解析的问题

Question

我正在尝试使用 ChartJS 2.9 的浮动条功能来模仿甘特图格式。到目前为止，我已经设法用折线图和 ChartJS 的一些创造性弯曲做了类似的事情，但是它存在严重的缺陷，它的功能不像我需要的那样。

这是我现在所拥有的，它只是使用一个简单的整数数据集：

var temp = '{ "EmpLst": {"0" : "No Name","1" : "No Name2"},"dateData" : [{"x": "2021-1-6", "y": "2021-2-16"},{"x": "2021-1-31", "y": "2021-5-19"},{"x": "2020-11-2", "y": "2020-12-16"},{"x": "2020-12-20", "y": "2021-1-7"}]}';

var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);


var data = {
  type: 'horizontalBar',
  data: {
    labels: empNames,
    datasets: [{
      label: 'data',
      data: [
        [-3, 0],
        [1, 4]
      ],
      backgroundColor: 'lightblue'
    }, {
      label: 'data',
      data: [
        [1, 3],
        [6, 8]
      ],
      backgroundColor: 'lightblue'
    }]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Horizontal Floating Bars'
    }
  }
};


var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data);

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
  <canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
  <div style="opacity:0;" class="chartTooltip center">
  </div>
</div>

嗯，忠于时尚，我以某种方式解决了我最初的问题。现在我无法获取格式的 x 轴值。这是我现在在下面的代码。我相信，根据 ChartJS 文档，我正确设置了时间对象，并且包含了所有 displayFormat 选项。

花了很多时间写这个问题，寻找我可能错过的关于为什么标签不会格式化的数据。

var temp = '{ "EmpLst": {"0" : "No Name","1" : "No Name2"},"dateData" : [{"x": "2021-01-06", "y": "2021-02-16"},{"x": "2021-01-31", "y": "2021-05-19"},{"x": "2020-11-2", "y": "2020-12-16"},{"x": "2020-12-20", "y": "2021-01-07"}]}';

var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var dateData = Object.values(parsedJSon.dateData);

var dataSets = [];

for (var i1 = 0; i1 < dateData.length; i1++) {
  dataSets.push({
    label: 'data',
    data: [
      [moment(dateData[i1].x, 'YYYY-MM-DD'), moment(dateData[i1].y, 'YYYY-MM-DD')],
      [moment(dateData[i1 + 1].x, 'YYYY-MM-DD'), moment(dateData[i1 + 1].y, 'YYYY-MM-DD')]
    ],
    backgroundColor: 'lightblue'
  });

  i1++
}


var data = {
  type: 'horizontalBar',
  data: {
    labels: empNames,
    datasets: dataSets
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Horizontal Floating Bars'
    },
    scales:{
    xAxes: [{
      type: 'time',
      time: {
        unit: 'month',
        displayFormats: {
          millisecond: 'MMM YY',
          second: 'MMM YY',
          minute: 'MMM YY',
          hour: 'MMM YY',
          day: 'MMM YY',
          week: 'MMM YY',
          month: 'MMM YY',
          quarter: 'MMM YY',
          year: 'MMM YY'
        }
      },
      ticks: {
        min: moment('2020-09-01', 'YYYY-MM-DD'),
        max: moment('2021-07-01', 'YYYY-MM-DD'),
      },
    }],
  }
  }
};


var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
  <canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
  <div style="opacity:0;" class="chartTooltip center">
  </div>
</div>

我可能看多了一些东西，但不知道它是什么。

Answer 1

好的，非常棒的时刻。我忘了在 scale 中添加 xAxes 对象……有效！