问题标签 [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 回答
1258 浏览

chart.js - 在图表 JS v3 上添加 beforeDraw 回调

我正在尝试在 Char JS 3.3.2 上使用自定义插入符号和位置构建条形图。

我刚刚在插件中添加了 beforeDraw 回调,但它从未被调用过。

任何人都可以帮助我得到这个问题的答案吗?

我的代码在这里-> https://codepen.io/wsjraphael/pen/NWpZOjL

0 投票
1 回答
258 浏览

javascript - chart.js 3 和时间轴显示错误的日期数据

我很难让 chart.js 在时间轴上运行。

我有以下简化代码:

包含最新的 3.4.0 chart.js 时,时间轴的格式不正确(数据点均匀分布在 x 轴上)。但是在使用 2.9.3 版本时,它显示正确(数据点分布不均匀)。

小提琴不工作(使用 3.4.0):https
: //jsfiddle.net/ungoq8j6/1/ 小提琴工作(使用 2.9.3):https ://jsfiddle.net/ungoq8j6/2/

根据文档(对该主题完全模​​糊),您必须包含一个日期库和一个适配器(此处为 moment.js + chartjs-adapter-moment)。

该脚本仅在客户端使用,因此没有可用的 node.js/npm。

0 投票
0 回答
191 浏览

javascript - 如何在条形图 js 3.x 上显示数据值?

如何使用 chart.js 3.X 在图表上的每个条形顶部显示数据值?

更具体地说,我有 5 个条形图通过此更新在接收数字时更改数据,但查看确切数字的唯一方法是将鼠标悬停,因此无效。

我已经看到你可以在旧版本中做到这一点,但它不再起作用了,我现在阅读文档时无法弄清楚如何做到这一点。

感谢您的任何建议。

0 投票
1 回答
66 浏览

javascript - 更新 chart.js (2.8.0 -> 3.4.1) 后图表区域出现奇怪的“填充”

对不起,我的英语不好。

将 chart.js 从 2.8.0 更新到 3.4.1 后,我在图表区域看到了奇怪的“填充”(左右)(请看截图)。

填充.

在 Samples 的官方网站上,您可以看到没有任何填充的折线图。但我在条形图示例中看到了它(可能是条形图的某些设置可以生效?)。

这是图表配置、图表实例化、插件和带有样式的模板的代码:

模板

风格

我尝试了什么:

  1. 检查数据和数据集;
  2. 禁用 chartjs-zoom-plugin;
  3. 设置options.layout.padding为 0;
  4. 设置options.responsivefalse;
  5. 设置data.datasets.borderWidth为 1;

我怎样才能删除这个“填充”?

0 投票
1 回答
161 浏览

charts - Chart js 剪掉了标题和图例

我写了一个chart.js 图形代码设置标题和轴X 和Y 图例。当我更改版本时,两者都消失在图形中。有没有人有同样的问题?

我实际上使用的是 chat.js min.js 版本 3.3.2。

选项代码:

0 投票
1 回答
254 浏览

chart.js - Chart.js 重置缩放按钮

我正在使用 chart.js API 版本 3.4.1,并且我有一个按钮可以在缩放后重置图表。当我单击按钮时,返回以下错误:

未捕获的类型错误:$(...).resetZoom 不是函数

HTML 代码:

JS代码:

有谁知道重置图表的缩放比例?

0 投票
2 回答
251 浏览

javascript - Chart.js 控制台 JS 错误,同时在单击事件上销毁图表

在第一个图表“config.categoriesChart”的条形图单击事件上获取控制台错误“ chart.js:10403 Uncaught TypeError: Cannot read property 'handleEvent' of undefined在此处输入图像描述,显示为 chart.legend.handleEvent(args.event );

该问题发生在销毁柱上的第一个图表单击第一个图表的事件后。

但是如果我使用 $('#how_i_spend_canvas').replaceWith($('')); 它工作正常而不会破坏图表。 在此处输入图像描述

请让我这是什么问题?

document.ready 中的所有代码

0 投票
1 回答
65 浏览

javascript - 动画外半径和内半径

我创建了一些悬停和单击更改,以增加和减少圆环图上的outerRadius和属性。innerRadius但我希望运动更顺畅。

密码笔

0 投票
1 回答
246 浏览

chart.js - chart.js 饼图 - 如何通过平滑过渡更新数据集

我有一个 chart.js 饼图。当我更新数据集时,我希望饼段能够平滑地调整大小以适应新值(即大小增加/缩小)。

饼图每次都会进行旋转过渡。设置新数据后,我可以使用 .update('none') 关闭旋转转​​换,但是饼图会立即更改而没有转换。

有没有办法做到这一点?

我的饼图设置代码是:

并且更新代码(在 AJAX 请求之后)是......

我正在使用 chart.js 3.3.2 版...感谢您的帮助

干杯

0 投票
0 回答
50 浏览

chart.js - 如何提高 Chart.js 的输出质量 --> pdf 和 png 文件的图像质量都较低

我成功地获取 Chart.js 输出并将其发送到图像文件 (png) 和 pdf。问题在于,两种输出的图像质量都远低于浏览器中的图表。png 文件勉强可以接受,而 pdf 则非常粗糙。是否有另一种方法可以从 Chart.js 生成与浏览器中具有相同视觉质量的输出?

这是我输出到 png 的方式:

png 输出

这是我输出到pdf的方式:

对 PDF 的另一项观察是,此代码生成的文件比我预期的要大得多 - 4,700 KB 与 21 KB(从我当前在 MS Access 中的解决方案输出到 pdf)。我无法添加 pdf,所以我在此处包含图像的副本。注意文本和图例点中的颗粒度:

PDF输出

我正在使用相对较新的 Chart.js (3.4.1) 和 jsPDF (1.5.3) 版本。

感谢您的任何意见。