问题标签 [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.

0 投票
1 回答
1377 浏览

javascript - 如何使用 chart.js 3.0.0 在 React 上下文中访问 Chart.helpers.color?

我已经设法弄清楚如何在 React 应用程序中为新的 chart.js 3.0.0 导入和注册模型,但我不知道如何使用 Chart.helpers.color。这是我的导入和注册:

然而,当我调用 Chart.helpers.color 时,如下所示:

应用程序抛出 TypeError: chart_js__WEBPACK_IMPORTED_MODULE_1__.Chart.helpers is undefined

任何人都知道我怎样才能让这个 React 应用程序访问 Chart.helpers?谢谢!(或者,当然,欢迎使用替代方法!这是用于使用 alpha 绘制热图来表示值。)

0 投票
2 回答
558 浏览

javascript - Chartjs 图表只有一个轴

Chartjs 一个没有网格、轴和刻度标签的折线图。

在此处输入图像描述

我想绘制类似上面的图表。

我不想要轴标签、刻度标签和网格线,只有一条线会随着数据(X 值)添加到图表而在右侧进行。我想在添加到图表的点上显示标签。我们可以在图表中只有一个轴 (X) 吗?

我确实在下面尝试过:
https ://jsfiddle.net/Lxya0u98/2/

我的数据集如下:

0 投票
2 回答
3235 浏览

chart.js - Chartjs 数据集重叠和 z-index

我使用 chart.js 版本 3.x 实现了以下图表。

https://jsfiddle.net/Lxya0u98/12/

我的图表中有多个数据集来实现我想要的行为。

我面临数据集重叠的问题。在图表中,我已经结束了blue color line与数据集的重叠green color dot。有没有办法避免这个问题?

我有以下两个数据集:

数据集是否有 Z 索引,以便它们出现在堆栈中前一个的顶部?

0 投票
0 回答
227 浏览

javascript - 如何使用 ChartJS 3 的默认动画选项为插件设置动画?

所以我有一个插件可以在“afterDraw”事件之后进行自定义绘图。我希望能够通过覆盖图例框 onClick 方法并使用图表默认动画选项为隐藏部分设置动画来隐藏绘图。我可以使用插件的 id 调用任何函数吗?提前致谢。

我的代码示例: addLabel 部分只是进行绘图,仅此而已。

0 投票
1 回答
696 浏览

javascript - 有什么方法可以更改 Chartjs 3.0.0 中标签的字体颜色和大小

使用 chart.js 3.0.0 测试版

看来他们还没有实施任何方法来更改标签的字体属性(下面的自包含示例中的 Volume 和 Month )

我尝试了几种方法,但似乎这是不可能的

需要明确的是,我要更改颜色的是标签,而不是标题或数据集。

谁能证实这一点?

0 投票
1 回答
658 浏览

chart.js - Chart.js 上的动态最大 y 轴值

使用 Chart.js,有没有办法设置动态最大 y 轴值?

我有一个图表,其绝对最大值始终为 999。如果值较低(例如 50、100 或 200),y 轴自动缩放(最大刻度分别为 60、110 或 210例如)如预期的那样。

但是,如果其中一个数据点是 999,则 y 轴最大值变为 1000。如果我的图表中只有低值,是否有任何方法可以将 999 设置为 y 轴最大值而不强制此最大值为 999?我尝试在选项中使用maxofsuggestedMax失败。

0 投票
0 回答
66 浏览

javascript - Chart.js 使 pointRadius 响应式

在 Chart.js 上,有没有办法让 pointRadius 响应?我有一个图表可以很好地调整大小,但 pointRadius 是恒定的。

在宽屏幕上,一切都很好,但在移动设备上,图表看起来很压缩。我已经尝试了几个 JavaScript 函数来检测画布的大小并相应地计算 pointRadius 但我无法让它工作。

桌面

移动的

有什么优雅的方法来解决这个问题吗?Chart.js 画布位于 Bootstrap 4 容器中。

0 投票
1 回答
38 浏览

chart.js - 如何在 ChartJS 中将刻度值更改为标题

在此处输入图像描述

您好,请告诉如何可能显示文本标题而不是 int 值,看图片,

ChartJS 版本 3

0 投票
1 回答
43 浏览

animation - chart.js update() 函数无法正常工作

我遇到了 chart.js 的问题,即使 update() 函数未设置为 0,动画也无法正确播放,动画仅播放“一次”,完成后不再更新。任何帮助将不胜感激。

我的更新功能如下。

0 投票
1 回答
2042 浏览

javascript - Chartjs 隐藏数据集图例 v3

我当前在网页上的图表由 Chart.js v2.5.3 提供支持。不久前配置的图表工作得很好。这是代码:

由于 v3 现在可用,我正在考虑切换到它。快速测试揭示了一些我需要克服的问题。我正在努力解决的问题之一是无法隐藏数据集图例。在 V2.5 中,它是通过options.legend.display设置为false来完成的,但不再是。在文档中,我没有遇到任何可以帮助我的东西。

有没有人可以建议如何在 Chart.js V3 中隐藏图例?

/库巴