程序员经验分享-hwhale

如何创建纵轴（Y 轴）为字符串的图表？

2024-02-16

我想要制作的图表是使用 Chart.js 制作的折线图，纵轴为字符串，横轴为数字。 例如，横轴是时间，纵轴是帽子的颜色。 见下图

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21],//Number of frames
    datasets: [{
      label: 'The colour of the hat of the person in the frame',
      data: ["red","blue","red","blue","yeallow","red","blue","red","blue","yeallow",.....],
      borderColor: '#f88',
    }],
  }
});

是的，您必须将 y 比例设置为类别，还为其提供标签数组，然后在数据数组中您可以提及这些标签：

const options = {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6],
    datasets: [{
      label: '# of Points',
      data: ["Blue", "Red", "Red", "Orange", "Green", "Orange"],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      y: {
        type: 'category',
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      },
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

chartjs

如何创建纵轴（Y 轴）为字符串的图表？ 的相关文章

随机推荐

  • 对不同的 Android 应用程序使用一个 Google 地图 API 密钥

    我刚刚生成了要在我的 Android 应用程序中使用的 Google 地图 API 密钥 我必须提供应用程序的 SHA 1 指纹和包名称 它看起来像这样 BB 0D AC 74 D3 21 E1 43 67 71 9B 62 91 AF A

  • 计算两个日期之间的星期几小时对

    考虑以下列表星期几小时配对24H format Mon 9 23 Thu 12 13 14 Tue 11 12 14 Wed 11 12 13 14 Fri 13 Sat Sun 和两个时间点 例如 Start datetime datet

  • ffmpeg 给出错误选项 movflags not find

    在 Ubuntu 12 04 LTS 中我使用过 movflags frag keyframe empty moov在我的 ffmpeg 命令中 ffmpeg i http filesbe vocativ internal net 03 4

  • 处理 appwidget 的多个实例

    我有一个配置活动 一个大型小部件提供程序和一个小型小部件提供程序 在配置活动中 我在共享首选项中保存了一些值 我从大大小小的应用程序小部件提供商那里获得了这些共享的偏好 我无法为应用程序小部件提供唯一的 ID 并且每次从配置活动转到应用程序

  • D7 需要苹果风格的“等待”动画

    有谁知道与 Delphi 7 一起使用的 Apple 风格 等待 动画 VCL 组件吗 谢谢 不知道当前的 Apple 外观如何 但这里有一个免费的在线服务来创建 Ajax 加载 gif 文件 http www ajaxload info

  • Spark 构建路径与不兼容的 Scala 版本 (2.10.0) 交叉编译

    当我尝试在 scala IDE 中执行 Spark sql 代码时 出现以下错误 有人可以帮我解决这个问题吗 spark build path is cross compiled with an incompatible version o

  • 在 AngularJS 中只注册一次事件监听器

    我正在将一个事件从我的导航栏控制器广播到另一个控制器 但是如果我多次初始化控制器 当我在应用程序中前后移动时 则在我的控制器上执行的函数 on事件运行多次 因为它已注册多次 rootScope on submitBookingDialog

  • 如何指定DbContext要使用的表的名称

    这是来自的后续问题我之前的问题 https stackoverflow com questions 26404786 dbcontext doesnt give any data 我的印象是 如果数据库中有多个表 则该表的名称DbSet变量

  • 我在哪里可以找到将任意布尔表达式转换为合取或析取范式的方法？

    我写过一个小应用程序 https bitbucket org BillyONeal pevfind overview将表达式解析为抽象语法树 现在 我对表达式使用一系列启发式方法来决定如何最好地评估查询 不幸的是 有些例子使查询计划变得非常

  • Mongoose 不会从 JSON 数组创建子文档

    我正在尝试将包含第一级数据和数组的 JSON 对象写入 MongoDB 相反 发生的情况是所有第一级数据都被存储 但数组中包含的任何内容都没有存储 当记录服务器接收到的数据时 我看到了整个对象 这让我相信我的 Mongoose 代码有问题

  • 获取裸存储库的工作副本

    我有一台服务器 上面有一个用于推送的裸存储库 但是 我的服务器需要有主分支的工作副本 如何仅从裸存储库获取工作副本 您可以简单地将存储库克隆到同一台计算机上的另一个目录 git clone bare repo dir 当前目录将成为您的存储

  • 如何识别哪个容器拥有哪个覆盖目录？

    My var lib docker overlay目录包含我的容器的数据 但目录名称均经过哈希处理 如何确定哪个容器拥有哪个覆盖层 您可以使用jq像这样 docker inspect docker ps qa jq r map Name G

  • BinaryFormatter 中的引用完整性

    Protobuf net 中 AsReference 选项的存在以及 BinaryFormatter 是 图形序列化器 这个词让我假设 BinaryFormatter 不维护引用 并且它会复制每个对象 但我做了一些测试 发现单个 Binar

  • 从 VB.NET 中的 List(Of T) 中删除重复项

    我无法从列表中删除重复项 我究竟做错了什么 Dim Contacts As New List Of Person remove duplicates Contacts Contacts Distinct New PersonEquality

  • 可靠集合缓存作为 Service Fabric 中的缓存

    我的系统使用一堆微服务来处理一个项目 我计划创建一个有状态微服务来保存该项目的最新状态 在该服务中 我计划将所有项目状态存储在可靠的字典中 并且每当访问项目时都会更新该项目的 上次访问 字段 我的要求是 我只想将最近使用的项目存储在可靠的集

  • bc 及其 ibase/obase 选项：

    我偶然发现了一个奇怪的错误 我想 我尝试将 512 读取为基数 6 的数字 并将其输出为基数 16 echo ibase 6 obase 16 512 bc 161 正如你所看到的 输出是161 但它应该是bc 原文如此 我尝试使用基数 1

  • PeekMessage 收不到消息？

    我创建了一个自定义消息类型 用于调整我的大小Window 称为WM NEED RESIZE 我已在 h 文件中定义它 并在 cpp 文件中初始化 我也注册了我的WindowProc接受消息的功能 以下是这些项目的代码 const uint3

  • 部署在iis上的asp.net core应用遇到500内部服务器错误

    哎呀 500内部服务器错误 启动应用程序时发生错误 当我将数据库功能添加到我的 asp net core 应用程序并将其部署到 iis 时 出现此消息 当我在 Visual Studio 中开发它时 一切都很顺利 但是部署之后就出现了这个错

  • Django 迁移添加默认字段作为模型函数

    我向 Django 模型添加了一个新的 不可为空的字段 并尝试使用迁移来部署该更改 我如何将现有模型使用的默认值设置为这些模型的某个函数而不是常量 举个例子 假设我以前有一个created on字段 我刚刚添加了一个updated on我想

  • 如何创建纵轴（Y 轴）为字符串的图表？

    我想要制作的图表是使用 Chart js 制作的折线图 纵轴为字符串 横轴为数字 例如 横轴是时间 纵轴是帽子的颜色 见下图 var myChart new Chart ctx type line data labels 1 2 3 4 5

热门标签