问题标签 [chart.js3]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Chart.js 3.x 无法在图表上显示数据
我使用 chart.js 3.x 有下面的图表。
https://jsfiddle.net/7oxmesnj/1/
我有以下图表配置:
我无法在散点图上绘制数据。
我已经关注了迁移公会,但图表上仍然没有数据。
https://www.chartjs.org/docs/master/getting-started/v3-migration
chart.js - Chart.js 如何使用脚本选项
我正在根据迁移指南将 chart.js 迁移到 3.x。
https://www.chartjs.org/docs/master/getting-started/v3-migration/
我正在尝试将 xAxis zeroLineColor 设置为“#FFFFFF”,并且我希望将网格线颜色设置为“#00FFFF”,但根据 chart.js 迁移文档文档scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead
。
我不确定如何使用可编写脚本的比例选项将 xAxis 线零设置为白色。
更新:
工作示例:
https ://jsfiddle.net/g4vq7o2b/2/
javascript - Chart.js 重绘正在渲染的图表
我正在使用chart.js 3.x
JavaScript 库来显示图表。
我需要更新正在进行渲染的图表。
我正在使用 JavaScript Worker 来更新图表数据。
我正在做类似下面的事情来清理图表数据集。
但我看到一些线仍在图表上,并且没有正确清除。
可能是连续绘图导致此问题。
我也试过clear()
和reset()
图表但没有效果。
那么如何正确清除图表数据并重新绘制新数据集。
javascript - 停止渲染正在渲染的图表
我有一个折线图,其数据连续更新为 5000 条记录。
但是在某个随机点,我想停止当前正在进行的绘图并从非常大的地方重新绘制图表。
我有下面的代码来清除图表。
我正在将数据推送到以下代码中的图表:
如果我收到停止渲染,那么我会停止并清除图表。
但是有时图表上显示的数据并没有被清除,它会再次开始绘制新数据,从而弄乱图表。停止和重绘新数据之间有大约 1 秒的延迟。
我想清除图表中的所有数据并开始重绘新数据,而不创建新图表或画布。
javascript - Chart.js 版本 3:如何为刻度线和网格线设置不同的颜色
有没有办法使用 chart.js 3.x 为图表刻度线和网格线颜色设置不同的颜色?当我更改网格线颜色时,刻度线颜色也会发生变化,我希望刻度线和网格线具有不同的颜色。
我尝试使用以下配置,但它改变了刻度线和网格线的颜色。
如何使用scriptable options
为刻度线和网格线设置不同的颜色?
javascript - chartjs 3.0 中的 generateLegend() 发生了什么?
我的理解是在 3.0 版本中已经贬值了。是否有其他方法可以轻松完成图例的自定义?
chart.js - Chart.js - 我在哪里可以找到应该注册的组件?
我是 Chart.js 的新手,看到了 v3 文档:
Chart.js 3 是可摇树的,因此有必要导入和注册您将要使用的控制器、元素、比例和插件。
我想知道我在哪里可以找到这些注册的东西,例如,这个例子需要注册什么才能工作?
javascript - Chart.js 将 stepSize 分成相等的步数
使用chart.js 3.x
如何将 Y 轴分成相等的步数,但不应超过三步的总数。
示例图表,
我设置了将 Y 轴分成三个相等的步长的步长,但它被忽略了。
https://jsfiddle.net/0awxe539/3/
我想让 Y 轴分成最多三个相等的步长。
如果min is 0
和max is 0.5
然后 图表应该有步骤0
,0.25
和0.5
。
添加maxTicksLimit:3
有一些随机行为,有时我只看到 2 个刻度而不是 3 个。
此外,我的图表数据是动态的,我在运行时计算和更新 min、max 和 stepSize。
javascript - 如何使用 chart.js 3.x 绘制水平线?无法让它工作
目标
我想在我的 html 页面中通过 CDN 集成使用 Chart.js 3.x 创建一个由三个水平线组成的图表,这些水平线覆盖我的实际数据集线。
所以,我没有自己的 Chart.js 安装,但正在使用 CDN。到目前为止,我以这种方式使用最新的 Chart.js 3.x Beta 版本没有真正的问题。
重要提示:由于我需要它的一些附加 Beta 功能,我无法恢复到稳定的 Chart.js 2.x。
预期结果
实际结果
我使用 Chart.js 版本 3.0.0-beta.6 根据我的数据集创建实际折线图没有问题。如果您评论 JavaScript Fiddle 部分的第 64 行,您将看到基本图形正常工作。
但是,不幸的是,我无法绘制水平线!
到目前为止我尝试过的
我阅读了 Chart.js 的文档和 chartjs-annotation-plugin 的工作示例 - 但不幸的是,所有这些都仅基于 Chart.js 版本 2.x。
我没有设法让它在短时间内尝试 CDN https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.6/chart.js和 https://cdnjs.cloudflare.com /ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js一起。没有找到任何工作,例如 Fiddle 示例。
现在我尝试使用内联 Chart.js 插件但没有成功,例如收到错误消息
Fiddle JavaScript 部分的第 8 行:“#55:15 TypeError: canvas is undefined”