程序员经验分享-hwhale

时间图chart.js

2024-02-12

我正在学习如何使用chart.js我想要一个图表，以格式“h？h：mm”显示一天中不同时间（x 轴）的随机值。

在 x 轴上，我想要一小时的固定步长，从上午 12 点 (0:00) 开始，到上午 8 点 (8:00) 结束。

以及数据，例如 (x = 4:45, y = 67) 在 te 对应的 x 刻度（4:00 和 5:00 之间的 3/4）

我尝试了以下方法：

var cfg = {
  type: 'line',
  data: {
    labels: ['00:00', '01:35', '02:20', '03:05', '04:07', '04:57', '05:25', '06:08', '07:10'],
    datasets: [{
      data: [
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45),
        randomScalingFactor(18, 45)
      ],
      label: "Improved ETA",
      borderColor: "#e67e22",
      borderWidth: 2,
      fill: false,
      lineTension: 0
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: 'Improved ETA',
      fontSize: 14,
      fontFamily: 'Arial',
      fontColor: '#000'
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          padding: 12
        },
        gridLines: {
          color: 'rgba(0, 0, 0, 0.06)',
          zeroLineColor: 'rgba(0, 0, 0, 0.06)',
          drawTicks: false
        }
      }],
      yAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 80,
          padding: 12
        },
        scaleLabel: {
          display: true,
          labelString: 'mins'
        },
        gridLines: {
          color: 'rgba(0, 0, 0, 0.06)',
          zeroLineColor: 'rgba(0, 0, 0, 0.06)',
          drawTicks: false
        }
      }]
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById('foo').getContext('2d');
  window.myLine = new Chart(ctx, cfg);
};
<div style="width: 600px; height: 400px;">
  <canvas id="foo"></canvas>
</div>

但这不是我想要的，因为 X 轴刻度采用标签的值（x 数据）。更糟糕的是，刻度之间的间隔始终相同（例如，从 10:30 到 10:40，与 8:00 到 9:00 之间的间隔相同）。

PD:由于时间图，我还阅读了有关使用 moment.js Chart.js 包的信息：https://www.chartjs.org/samples/latest/scales/time/line.html https://www.chartjs.org/samples/latest/scales/time/line.html


首先你应该省略labels但将您的数据定义为个人积分 https://www.chartjs.org/docs/2.9.4/axes/cartesian/time.html#input-data，其中每个元素都有一个t and an y财产。

data: [
  { t: '4:45', y: 67 },
  { t: '6:12', y: 45 },
  { t: '7:33', y: 56 },
],

综合以上数据，xAxes.time https://www.chartjs.org/docs/2.9.4/axes/cartesian/time.html#configuration-options选项必须定义如下：

time: {
  parser: 'H:mm',
  unit: 'hour',
  stepSize: 1,
  displayFormats: {
    hour: 'H:mm'
  },
  tooltipFormat: 'H:mm'
},

您还可以进一步定义xAxis.ticks https://www.chartjs.org/docs/2.9.4/axes/radial/linear.html#tick-options选项如下：

ticks: {
  min: '0:00', 
  max: '8:00' 
}

正如您已经注意到的，Chart.js 内部使用Moment.js https://momentjs.com/对于功能时间轴 https://www.chartjs.org/docs/2.9.4/axes/cartesian/time.html。因此您应该使用捆绑版 https://www.chartjs.org/docs/2.9.4/getting-started/installation.html#bundled-buildChart.js 的一部分，其中在单个文件中包含 Moment.js。

请查看下面的可运行代码并了解它是如何工作的。

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'My Dataset',      
      data: [
        { t: '4:45', y: 67 },
        { t: '6:12', y: 45 },
        { t: '7:33', y: 56 },
      ],
      borderColor: 'blue',
      fill: 'false',
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          parser: 'H:mm',
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'H:mm'
          },
          tooltipFormat: 'H:mm'
        },
        ticks: {
          min: '0:00', 
          max: '8:00' 
        }
      }]      
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

charts

chartjs

时间图chart.js 的相关文章

随机推荐

  • C++ 创建 Windows 屏幕保护程序

    我使用 OpenGL 和 SDL 在 C 中创建了一个动画 它不使用 Windows 库 并希望将其用作 Windows 系统的屏幕保护程序 我读过一个例子 它描述了你只需更改 exe延伸至 scr 我已经这样做了并将动画作为屏幕保护程序运

  • 如何使用 php echo 显示长轮询结果

    我正在使用一个长轮询脚本 如果我附加任何文本进行测试 该脚本可以很好地工作 现在我想显示 user php 从数据 update php 收集的长轮询结果 我在 user php 页面使用了我的轮询脚本 在这里 如果我使用如下的 测试轮询

  • 作为另一个用户安装共享文件夹（vbox）[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 很抱歉在这里问这个问题 但我尝试了服务器故障 但 4 天都没有得到任何答复 那里的相关问题 https serverfault com questio

  • ASP.Net 5 类库包项目中的 dnxcore50 框架支持吗？

    我正在尝试开发我的第一个 ASP Net Web 应用程序 在我的解决方案中我有两个项目 AWeb Application and Class Library Package 并注意到 Web 应用程序的框架中有这个project json

  • 如何在 Dockerfile 中指定 ENTRYPOINT 的工作目录

    Docker 映像 基于 Windows 包含一个应用程序目录 位于C App 该目录内有几个子文件夹和文件 包括一个名为process bat Dockerfile 用于构建镜像 的结尾如下 ENTRYPOINT C App proces

  • DataGridView 可调整列大小，但最后一列无法调整得更大？

    For c 0 To grd Columns Count 1 grd Columns c Resizable DataGridViewTriState True Next c 这使得我的 DataGridView 中的所有列都可以调整大小

  • Azure 服务 TopicClient 线程安全且可重用吗？

    我们正在使用 Azure SDK 将消息发布到服务总线 在 Web API 调用中 我们对每个传入请求重复执行这些任务 MessagingFactory factory MessagingFactory CreateFromConnecti

  • 计算OWL本体中子类的深度

    我正在寻找一个 SPARQL 查询 它可以返回 OWL 层次结构中指定子类的位置 我研究了几个例子 但我能达到的最好结果是计算指定超类与其子类之间的相对路径 感谢约书亚 泰勒 https stackoverflow com a 230949

  • 连接到远程 mongoDB 服务器

    我有一台使用 SSH 连接到的远程计算机 我在上面安装了 mongoDB 并且我希望远程使用它 如何使用 nodejs 和 mongoDB compass 连接到它 本地主机是IP吗 const db mongodb what do I w

  • 如何使用 Jackson Mixins 将 json 映射到具有不同结构的 java 对象

    如何转换这个json name abc city xyz 使用 Jackson mixin 到员工对象 3rd party class public class Employee public String name public Addr

  • DataGridView 动态更改数据源

    基本上 当我创建这个 DataGridView 时 我有这段代码来填充它 public void fillDataGrid IQueryable

  • Python For 循环返回最后一个值 |解释

    我有一个简单的问题 我已经解决了 但如果有人能解释一下那就太好了whyfor 循环在 python 中执行此操作 如果有更优雅的方法 如果这是一个愚蠢的问题 真的很抱歉 我已尽力尝试多种方法并查看相关问题 但我仍然不确定为什么它不起作用 我

  • 我怎样才能在 C# 中得到这个正则表达式？

    我正在尝试匹配任何具有type Data 然后将其替换为我想要的文本 下面给出了一个示例输入 可以有一个或多个 layer name cifar type Data top data top label include phase TRAI

  • 如何传递Python args和kwargs？

    虽然我对 Python 的 args 和 kwargs 有一个大致的了解 我认为 但我很难理解如何将它们从一个函数传递到另一个函数 这是我的模型 from pdb import set trace as debug from django

  • 如何在选项卡页面之前添加内容页面或视图

    我想在之前添加页面 视图TabbedPage 我怎样才能做到这一点

  • jQuery 随机块引用

    在过去的两个小时里 我一直在寻找和测试这个问题的各种解决方案 但收效甚微 所以我只能寻求帮助 我想建立一个引用数组 每个引用都有引用和一个链接 可以随机提取 除了在页面刷新时更改它们之外 我不需要任何其他东西 不过 我有一些非常美味的 CS

  • 在数据库中存储枚举值的最佳方法 - String 或 Int

    我的应用程序中有许多枚举 在某些类中用作属性类型 将这些值存储在数据库中的最佳方式是什么 作为字符串还是整数 仅供参考 我还将使用 Fluent Nhibernate 映射这些属性类型 示例代码 public enum ReportOutp

  • dplyr::n() 返回“错误：不应直接调用此函数”

    If I do dplyr mutate MeanValue mean RSSI ReadCount n 一切正常 但是当我尝试限定该函数时 dplyr mutate MeanValue mean RSSI ReadCount dplyr

  • AttributeError：类型对象没有属性

    这是一个有效的多级继承程序 当我运行它时 它显示 AttributeError 类型对象 starts 没有属性 maths 我检查了类的关联 它们继承了 我是一个初学者 所以这对我的进步确实有帮助 class starts def ini

  • 时间图chart.js

    我正在学习如何使用chart js我想要一个图表 以格式 h h mm 显示一天中不同时间 x 轴 的随机值 在 x 轴上 我想要一小时的固定步长 从上午 12 点 0 00 开始 到上午 8 点 8 00 结束 以及数据 例如 x 4 4

热门标签