个人中心
gpt4 book ai didi

chart.js - 将 Chart.JS 的 Y 轴格式设置为时间

转载 作者：行者123 更新时间：2023-12-02 09:12:49 28 4
gpt4 key购买 nike

我有下面的图表，我想使用时间缩放 Y 轴(时间不是一天中的时间，而是总小时、分钟、秒，所以可能超过 24 小时)似乎无法得到它工作时，我得到的只是一个空白屏幕，当然这是一个语法错误，但无法发现它!谢谢

var ctx = document.getElementById("myChart3").getContext('2d');
var myChart3 = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
        datasets: [
            {
                label: "Time",
                backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"],
                data: ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"]
            }
  ]
    },
    options: {
        scales: {
            yAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        minutes: 'h:mm:ss a'
                    }
                }
        }]
        }
    }
});

最佳答案

时间刻度仅适用于 X 轴。

It can only be placed on the X axis.

但是对于 Y，您可以使用 linear 刻度并将每次表示为自 1970-01-01 以来以毫秒为单位的日期(通常的 Date 对象的做法)。

PLUNKER 或使用以下示例:

$(function(){
  const ctx = document.getElementById('myChart').getContext('2d');
  
  let years = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"];
  let times = ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"];
  
  let data = years.map((year, index) => ({
    x: moment(`${year}-01-01`), 
    y: moment(`1970-02-01 ${times[index]}`).valueOf()
  }));
  
  let bckColors = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"];
  
  let myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                label: "Time",
                backgroundColor: 'rgba(188, 229, 214, 0.7)',
                pointBackgroundColor: bckColors,
                data: data,
                pointBorderWidth: 2,
                pointRadius: 5,
                pointHoverRadius: 7
            }
        ]
    },
    options: {
        scales: {
            xAxes: [
              {
                type: 'time',
                position: 'bottom',
                time: {
                  displayFormats: {
                    years: 'YYYY'
                  },
                  unit: 'year'
                }
              }
            ],
            yAxes: [
              {
                type: 'linear',
                position: 'left',
                ticks: {
                  min: moment('1970-02-01 00:00:00').valueOf(),
                  max: moment('1970-02-01 23:59:59').valueOf(),
                  stepSize: 3.6e+6,
                  beginAtZero: false,
                  callback: value => {
                    let date = moment(value);
                    if(date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
                      return null;
                    }
                    
                    return date.format('h A');
                  }
                }
              }
            ]
        }
    }
  });
});
<html>  
  <head>
      <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://npmcdn.com/moment@2.14.1"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="500" height="300"></canvas>
  </body>
</html>

说明

您可以在 X 轴上设置年份，它可以是 linear 、 time 或 category 刻度。

在此示例中，X 轴是 time 刻度。

以下代码用于生成 X 和 Y 轴的值:

  let data = years.map((year, index) => ({
    x: moment(`${year}-01-01`), 
    y: moment(`1970-02-01 ${times[index]}`).valueOf()
  }));

对于 X 轴，我使用 moment js 创建相应年份第一天的日期。

对于 Y 轴，我使用 moment js 创建自 1970-01-01 以来的毫秒数日期。在这种情况下，所有小时与一天组合起来形成日期。 1970-02-01 以防止 1970-01-01 可能发生的边缘情况。然后，自 1970-01-01 起，这些毫秒与 Y 轴 linear scale 一起使用。

Y 轴 tick.callback 用于将相应的毫秒格式化为小时。因此使用 h A 格式来获取例如 1 AM, 1 PM, 12 AM, 12 PM, ... 。

关于chart.js - 将 Chart.JS 的 Y 轴格式设置为时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43863424/

28 4 0
文章推荐： templates - Helm 图表嵌套循环
文章推荐： debugging - 在我的嵌入式平台上运行 GDB 的不同方法
文章推荐： cocos2d-x - 使用 cocos2dx 自定义事件
文章推荐： layout - 在 Vaadin 7 中集成 SmartGWT 布局
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com