Chartjs初始动画想要从左到右改变(默认是从下到上)

2024-02-02

使用chartjs 2.1.4(定制的),默认图表从下到上显示动画,在我们的应用程序画布的下方有两个按钮(左和右)

在单击左侧按钮图表动画中想要从右到左, 单击右键图表动画想要从左到右显示

请帮我找到解决方案 提前致谢


var myData = [{x:0,y:0},{x:1,y:2},{x:2,y:1},{x:3,y:3}];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [myData[0]],
      lineTension: 0
    }]
  },
  labels:['a','a','a','a','a','a',],
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        ticks: {
          min: 0,
          max: 3
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 3
        }
      }]
     }
  }
});
var next = function() {
  var data = myChart.data.datasets[0].data;
  var count = data.length;
  data[count] = data[count - 1];
  myChart.update({duration: 0});
  data[count] = myData[count];
  myChart.update();
  if (count < myData.length) {
    setTimeout(next, 1000);
  }
}
setTimeout(next, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<canvas id="myChart"></canvas>

没有简单的选择,你必须使用这样的东西。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chartjs初始动画想要从左到右改变(默认是从下到上) 的相关文章

  • 如果静态值有效但 mySQL 的动态值无效,如何使用 Javascript 在 Chart.js 中显示 JSON 数据?

    我有以下形式的 JSON 数据 labels 12 11 2016 13 11 2016 14 11 2016 temperature 12 35 27 humidity 56 70 87 并想在 Chart js 中显示它 我已经找到了t
  • 在 Chart.js 中设置条形图 Y 轴标签的格式

    我在这里查看了文档和类似的问题 但似乎没有找到解决我的问题的可行方法 我正在使用 Chart js v 2 1 6 并且我有一个条形图 其中百分比值存储为数字 已乘以 100 我需要 y 轴标签和工具提示来显示 在值后面签名 有人可以解释一
  • 如何在 Angular 2 中实现 Chart.js?

    我正在使用最新版本的 Angular 2 V4 0 0 并且我想在我的项目中使用 Chart js 库中的图表 而不会有太多复杂性 如何在我的 Angular 项目中实现 Chart js 并且不会在最终生产中给我带来问题 您可以按照以下说
  • ChartJS 甜甜圈图表渐变填充

    因此 我尝试为 ChartJS 圆环图进行渐变填充 但这仅适用于水平方向 而不适用于圆形 这是我正在使用的代码 var ctx document getElementById chart area getContext 2d var gra
  • 如何在chart.js中应用渐变颜色?

    我正在使用 Chart js 库制作折线图 在这里我想将线条的颜色更改为渐变颜色 我试过的代码 const gradientFill ctx createLinearGradient 500 0 100 0 gradientFill add
  • 如何增加标签和图表区域之间的空间?

    我所有的标签都在栏的顶部 我可以看到这个 but I want that would be like this 填充不适用于税费 但适用于税费 legend display false scales xAxes position top s
  • Chart JS:忽略 x 值并将点数据放在第一个可用标签上

    我正在 Chart js 中制作折线图 并且遇到一个问题 我试图在线上绘制点数据 但它忽略了我给出的 x 值 而是将它们放在第一个可用标签上 this myLineChart new Chart this ctx type line dat
  • Chartjs 在鼠标悬停时非常快速地调整大小(闪烁)

    我在基于引导的页面中有一个图表 我试图在页面调整大小时调整它的大小 以遵循响应式设计的变化 所以我有这段代码 function redrawChart var w chart container width var c document g
  • Chart.js 时间序列跳过几天

    我有一个非常简单的条形图 其中每个数据点由日期 天 和数字组成 也许唯一的特点是并非涵盖每个日期 即有些日子没有数据点 绘制图表时 仅显示那些具有与其关联的数据点的日期 所有其他日期都被简单地省略 因此 x 轴分布不均匀并且会跳过值 如何确
  • 使时间序列在轴上显示最后一个日期?

    所以在 Chart js 中我有一个基于日期范围的时间序列 该图表无法将所有日期显示为轴标签 因此它显示了合理的选择 它始终在左侧显示第一个日期 但并不总是在轴的右端显示最后一个日期 例如 我的日期范围可以是从 1 月 1 日到 7 月 3
  • 将 FirestoreCollection 转换为数组?

    我在将 Firestore 数据转换为 Chart js 图表的数组时遇到困难 从 Firestore 获取数据 fetchData Get data this updatesCollection this afs collection p
  • 如何防止标签在移动屏幕 Chart.js 上重叠

    我正在使用这个例子jsfiddle https jsfiddle net Trekels fec0v5kj 但是当我使用小屏幕时标签开始像这样重叠 我可以做什么来预防它 我想让它完全响应 我尝试改变长度和其他长宽比等 但没有成功 var c
  • Chart.js 每个点的自定义图像

    我正在使用 Chart js 并且正在寻求有关散点图上每个点的自定义图像的帮助 我尝试过使用 javascript 图像数组 但它不起作用 我是 canvas 和 html5 的新手 我想要的是每个点都是用户的小个人资料图片而不是圆圈 一个
  • 如何在多行字符中只显示一个标签?

    我使用 Chart js 创建一个图表 该图有两条线 因此它默认也显示两个标签 但我需要一种配置 其中应该显示红色标签 而应该隐藏蓝色标签 标签not线 感谢您的帮助 var config type line data labels 16
  • Chart.js 中具有线性时间刻度的折线图

    我正在尝试使用Chart js 3 3 2 https www chartjs org docs latest 显示一些具有等距 x 日期轴的折线图 就像他们给出的例子一样here https www chartjs org docs la
  • 如何在最新的 Chart JS 版本(3.3.2)中创建渐变填充折线图?

    I am wondering how to create a gradient line chart fill in Chart JS version 3 3 2 like this This StackOverflow问题 https s
  • Chartjs 插件数据标签不在图表上显示值

    我正在尝试使用 Chartjs 数据标签插件获取每个条形上的值 因此 在 a 条上方 a 想要看到数字 30 在 b 条上方或内部我想看到数字 50 但它根本没有显示任何价值 谁能帮忙并告诉我出了什么问题吗 我也尝试过使用不同版本的char
  • 如何在chartjs中绘制多个时间序列,其中每个时间序列都有不同的时间

    例如 我有两个时间序列 s1 2017 01 06 18 39 30 100 2017 01 07 18 39 28 101 and s2 2017 01 07 18 00 00 90 2017 01 08 18 00 00 105 我想在
  • 安装后如何使用 npm 包 (chart.js)?

    我正在制作一个练习 Laravel 站点 并且我已经通过 npm install 安装了 Chart js 这是一个愚蠢的问题 但现在我如何从这里使用它 或通过 npm 安装的任何东西 这些文件安装在节点模块文件夹中 我应该在页眉中使用标签
  • 图表js不显示

    我正在尝试使用 Charts js 创建一个简单的折线图 当我运行下面的代码时 没有出现图表 我究竟做错了什么 我正在关注这个教程http www chartjs org docs latest getting started http w

随机推荐

  • Visual Studio 的评论重花

    是否有内置命令或工具可以在 Visual Studio 中重排 C 注释 有时 一段代码需要多行注释 经过大量编辑后 您必须在适当的位置手动插入换行符 以免它超出编辑器窗口的右边缘 我希望能够通过一个键命令来完成此操作 使用 Visual
  • 使用 ggplot2 在 R 中绘制箱线图

    我是 R 新手 一直在尝试制作箱线图 显示了我正在使用的部分数据 h1 h2 h3 h4 h5 h6 h7 h8 h9 h10 1 0 003719430 0 002975544 0 003049933 0 003421876 0 0034
  • 在 Express / Connect 中配置上下文路径

    我有一个在 Expressconnect Jade Less 上使用 Coffeescript 构建的 Node js 应用程序 该应用程序将部署在几个不同的地方和不同的上下文路径上 例如 http someurl com http som
  • 每个流有多个内核的 CUDA 并发内核执行

    对 CUDA 内核使用不同的流使得并发内核执行成为可能 所以n内核上n如果流适合硬件 理论上它们可以同时运行 对吧 现在我面临以下问题 没有n不同的内核但是n m where m内核需要按顺序执行 例如n 2 and m 3将导致以下带有流
  • 如何查看linux中特定进程每5秒的内存消耗情况

    我只是想知道如何找到特定进程在特定时间 比如5秒 的内存消耗 我是linux新手 因此 详细的步骤将不胜感激 Use top p PID其中 PID 是进程 ID 应显示有关进程的信息 包括使用的系统内存百分比 类型d以及一个以秒为单位的整
  • 条件子句中的赋值是好的 ruby​​ 风格吗?

    为了写得更简洁 而不是这样做 test value method call that might return nil if test value do something with test value end 我一直在条件分配 if t
  • 当我运行 Protractor 时,“Runtime.executionContextCreated 有无效的‘上下文’错误

    当我运行量角器时 我收到以下错误 下面是我的 webstorm 控制台中显示的错误 C Program Files x86 JetBrains WebStorm 2016 2 bin runnerw exe C Program Files
  • 在 PowerShell 脚本中无法通过管道将字符串输入 cmd

    当我直接在 PowerShell 窗口中执行它时 我有以下工作调用 myexe C MyExe exe MyString myexe works Write Output MyString myexe seems to work too 但
  • Visual Studio 2017 - 允许远程用户访问 IIS Express 中的网站

    一直在浏览并尝试我找到的有关该主题的所有指南 但没有运气 我正在使用 HTTPS 运行 MVC 项目 并希望使用一些远程移动设备访问调试站点来测试该网站 我遵循了一个几乎可以工作的指南 我想我已经非常接近让它工作了 以下是我已完成的步骤 关
  • 如何获得可旋转div的四个角旋转手柄?

    我有一个div 用过Jquery UI rotatable旋转 div 的插件 我怎样才能让这个旋转手柄与绿色div的四个角一起旋转 box draggable rotatable 这是示例图像 在黑色圆形标记中我需要放置其他三个可旋转手柄
  • 使用supervisord管理docker容器的最佳方式

    我必须在上面设置 dockerized 环境 集成 质量保证和生产 same服务器 客户端的要求 每个环境的组成如下 rabbitmq celery flower 基于 python 3 的应用程序称为 A 每个特定分支 环境 在它们之上
  • XXX.exe 中发生“System.ExecutionEngineException”类型的未处理异常

    我有一个用 C 编写的 DLL 文件 我尝试在我的 C 代码中使用 C DLL C 方法调用正确 但进程完成后出现错误 异常详细信息 Completed System ExecutionEngineException 未处理 消息 Syst
  • 格式化输出流 ios::left 和 ios::right

    我有这个代码 cout lt lt std setiosflags std ios right cout lt lt setw 3 lt lt 1 lt lt setw 3 lt lt 2 lt lt n Output two values
  • 如何编写 IQueryable 来查询递归数据库表?

    我有一个这样的数据库表 Entity ID int PK ParentID int FK Code varchar Text text The ParentID字段是与同一表中另一条记录的外键 递归 所以该结构代表一棵树 我正在尝试编写一种
  • SetPixel 太慢了。有没有更快的方法来绘制位图?

    我正在开发一个小型绘画程序 我在位图上使用 SetPixel 来绘制线条 当画笔尺寸变大 例如 25 像素 时 性能会明显下降 我想知道是否有更快的方法来绘制位图 以下是该项目的一些背景 我使用位图 这样我就可以利用图层 就像在 Photo
  • typedef 函数指针递归

    我试图声明一个采用相同类型的函数作为参数的函数 void rec void f void void f f 我最终进行了递归尝试 您始终可以从void void rec void f void f f 但它不是类型安全的 我尝试用typed
  • 这是过度拟合吗?

    我有一个 CNN 它在训练数据上表现非常好 96 准确率 1 损失 但在测试数据上表现不佳 50 准确率 3 5 损失 泄密者签名过度拟合是指验证损失开始增加 而训练损失持续减少 即 图片改编自维基百科条目过拟合 https en wiki
  • 在configuration.nix中从nixos-unstable安装virtualbox模块

    可以从 nixos unstable 安装软件包 etc nixos configuration nix使用来自的配置这个答案 https stackoverflow com a 48838322 3040129 这是安装的示例htop来自
  • 以等概率从 Pandas 组中随机选择——意外行为

    我尝试从 12 个独特的组中随机抽样 每个组都有不同数量的观察值 我想从整个群体 数据框 中随机抽样 每个组都有相同的被选择概率 最简单的例子是一个包含 2 个组的数据框 groups probability 0 a 0 25 1 a 0
  • Chartjs初始动画想要从左到右改变(默认是从下到上)

    使用chartjs 2 1 4 定制的 默认图表从下到上显示动画 在我们的应用程序画布的下方有两个按钮 左和右 在单击左侧按钮图表动画中想要从右到左 单击右键图表动画想要从左到右显示 请帮我找到解决方案 提前致谢 var myData x