问题标签 [chart.js3]

有没有人使用 Chart.js 的最新版本 3.X 做过仪表图？

我见过有人在 2.X 版上修改甜甜圈图。

想知道是否有人用 3.X 做过，或者只是在寻找一些提示

我有一个 Javascript 项目，我从 API 源接收 Covid-19 数据。用户输入他们希望查看数据的国家/地区（从 2020 年 3 月至今），然后使用 chart.js 将数据绘制到屏幕上。我在用户输入国家/地区的输入字段中添加了一个事件侦听器，并以这种方式检索数据。但是，当我调用我的函数来绘制数据（ graphIt() ）时，该函数会发生一秒钟然后消失。我理解为什么会发生这种情况，因为该函数只被调用一次，所以它很快就完成了。但是，我要如何让 chart.js 保持多久？我将把我的代码的重要部分放在这里！

索引.html

index.js

我愿意学习已经有一种方法（通过配置或开发插件）来挂钩轴标签的渲染，这样我就可以控制用于渲染多行标签每一行的字体的各个方面（例如，我需要渲染的内容在视觉上类似于其下方的标签和子标签，主标签为粗体且字体较大，而直接位于其下方的子标签将是正常字体粗细且较小尺寸）。

我正在使用 ChartJs 3.5.1 版来呈现水平条形图（这意味着左侧的数据集标签实际上是在 y 轴下配置的），并且已经尝试了一些不同的东西：

• 挂钩滴答回调 - 但我什至不能使用这个函数来复制默认功能（进入该函数的值不是标签文本；而是数据行的索引/序号？）。即使我可以按照示例中所示的那样工作，对于标签的内容来说，这似乎比任何配置选项本身更重要。
• 将字体配置设置为ticks数组 - 但这仅允许我更改数据行之间的字体（例如，我可以将水平条形图中第一行的标签设置为 22，第二个标签设置为 10，等-但不更改给定标签行内的字体属性）
• 使用插件afterDraw来尝试调整事物 - 但同样，此时的配置似乎只将所有行视为一个标签。
• 尝试查看项目过去的 PR（主要集中在添加多行标签支持，以及特定于该区域的错误修复）以获得任何额外的见解

如果目前没有办法（通过插件或现有配置），是否有人对从哪里开始攻击这种变化作为新 PR 有很好的感觉？

更新 作为对我相应的ChartJs 功能请求的响应以及下面接受的答案，自定义插件似乎是目前完成我现在想要的唯一方法。

以下是我的配置中的关键位（诚然，“一次性使用”比接受的答案要多得多，因为鉴于我相对狭窄的用例，我将插件内部的一些配置作为硬编码值移动）：

我正在尝试为 Chart.js (v3.0) 制作自定义工具提示，但是，当我 console.log 显示函数的上下文时：

有没有办法记录这个，所以我可以看到可用的数据？

代码示例：

任何帮助表示赞赏。

我正在从 API 收集数据。

采用 JSON 格式：

[{'time':'08h00','magnitude':25, 'temper':12.6},{'time':'09h00','magnitude':39, 'temper': 5.3}]

制作我的图表：

然后我填充它：

我的问题是这个，它来自文档：

因为value是整体Object {'time':'08h00','magnitude':25, 'temper':12.6}

var value = context.dataset.data[index].temper; 和 var value = context.dataset.data[index]['temper'];

并且所有方式都不起作用。我该如何参考value['temper']？

尝试编写一个使用 Chart.js 的 Stencil/React Web 组件时，我在为ChartConfiguration.options. 专门为scales属性应用正确的类型是有问题的。

现在看起来像这样：

以这种方式与操作员一起使用ScaleOptionsByType界面as感觉很脏。我更喜欢使用直接类型分别定义每个比例选项，如下所示：

但这会抛出 (2/2) Type '{ type: "linear"; ...} is not assignable to {...} is missing the following properties from type 'CartesianScaleOptions': axis, offset, grid, title, and 19 more.。

感觉这些扩展类型是不可用的，因为它们在编译时需要太多的属性，而这些属性不需要具有可运行的代码。我错过了什么？

我已经使用 Chart.js 实现了图表，并使用 chartjs-plugin-zoom 实现了缩放功能，效果很好。但是，在滚动 y 轴时会给出大范围的小数点，这会导致值超出视点。如何避免小数点？

没有缩放：

放大时：

chartjs-plugin-zoom 代码：

使用 Chart JS 版本 3。如何传入外部工具提示可以使用的自定义数据？

我想用 HTML 重新创建这个工具提示。

我正在关注此页面上的示例“#External (Custom) Tooltips”：https ://www.chartjs.org/docs/latest/configuration/tooltip.html但我需要额外的数据来构建工具提示，如图像 url还是产品ID？我如何将它融入模型中？

我正在使用 Chart.js 版本 3。我需要在堆叠条形图的 y 轴上左对齐标签。如何做到这一点？

我正在 react 环境中使用 chart.js 制作图表。

如果你看第二张图，如果水平线有 130% 怎么办？100形成gray100 及以上green。我也想以与上述相同的格式制作它。

找了2天，不知道怎么弄

这是我正在进行的工作。

我想以这种格式制作。

这是我的代码。