Chartjs：Moment和ChartJS时间格式解析

zvokhttg 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(220)

我需要使用时间格式制作一个条形图，我开始使用这个one作为基础，但库版本是旧的，我需要使用新的，但它不工作，有人能帮助我吗？
值必须为小时：分钟：秒时间范围。
这是目前的代码这是目前的代码这是目前的代码这是目前的代码这是目前的代码这是目前的代码

enter code here
<!DOCTYPE html>
<html>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js">        </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-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>

</body>
</html>
<script>
var temp = '{ "EmpLst": {"0" : "Parado","1" : "A pé"},"dateData" : [{"x": "07:00:00", "y": "09:10:00"},{"x": "08:00:00", "y": "08:10:00"}]}';

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, 'h:mm:ss'), moment(dateData[i1].y, 'h:mm:ss')],
      [moment(dateData[i1 + 1].x, 'h:mm:ss'), moment(dateData[i1 + 1].y, 'h:mm:ss')]
    ],
    backgroundColor: 'lightblue'
  });

  i1++
}
console.log(Date.parse(dataSets[0].data[0][0]._d))

var data = {
  type: 'bar',
  data: {
    labels: empNames,
    datasets: dataSets
  },
  options: {
    indexAxis: 'y',
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Horizontal Floating Bars'
    },
    scales: {
              x: {
                type: 'time',
                time: {
                 unit: 'hour',
                  displayFormats: {
                    hour: 'HH:mm:ss'
                  },
                  tooltipFormat: 'HH:mm:ss',
                  ticks:{
                min: moment('00:00:00', 'h:mm:ss'),
                max: moment('23:59:59', 'h:mm:ss'),
                },
                }
              }
            }
  }
};

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

这就是我想要的

chart.js

来源：https://stackoverflow.com/questions/73576685/chartjs-moment-and-chartjs-time-format-parsing

1条答案

按热度按时间

juud5qan1#

当使用time axis时，不需要自己解析日期。只需定义time.parser，让Chart.js完成它的工作。根据3.x Migration Guide，还需要修改一些其他的东西以使它能与Chart.js v3一起工作。
请看一下下面修改后的可运行代码，看看它是如何工作的。

<!DOCTYPE html>
<html>

<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-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>

</body>

</html>
<script>
  var temp = '{ "EmpLst": {"0" : "Parado","1" : "A pé"},"dateData" : [{"x": "07:00:00", "y": "09:10:00"},{"x": "08:00:00", "y": "08:10:00"}]}';

  var parsedJSon = JSON.parse(temp);
  var empNames = Object.values(parsedJSon.EmpLst);
  var dateData = Object.values(parsedJSon.dateData).map(o => [o.x, o.y]);

  var dataSets = [{
    label: 'data',
    data: dateData,
    backgroundColor: 'lightblue'
  }];

  var data = {
    type: 'bar',
    data: {
      labels: empNames,
      datasets: dataSets
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Horizontal Floating Bars'
        },
        tooltip: {
          callbacks: {
            label: ctx => {
              const v = ctx.dataset.data[ctx.dataIndex];
              return v[0] + ' - ' + v[1];           
            }
          }
        }
      },
      scales: {
        x: {
          type: 'time',
          time: {
            parser: 'h:mm:ss',
            unit: 'hour',
            displayFormats: {
              hour: 'HH:mm:ss'
            }
          },
          min: '00:00:00',
          max: '24:00:00'
        }
      }
    }
  };

  var chart = new Chart('deviceOnChart', data);
</script>

赞(0）回复(0）举报 2022-11-06

我来回答

Chartjs：Moment和ChartJS时间格式解析

1条答案

相关问题

热门标签

最新问答