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

Question

我正在尝试使用ChartJS 2.9的浮动条功能来模拟gannt图表格式。到目前为止，我已经成功地用折线图和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文档，我相信我已经正确地设置了time对象，并且包含了所有的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

好的，伟大的多恩时刻。我忘了在scales中添加xAxes对象.成功了！