问题标签 [react-chartjs-2]

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 回答
142 浏览

javascript - 在 Chart.js 中自定义数据点的大小、高度和宽度?

您可以自定义散点图上数据点的高度和宽度吗?我希望方形数据点是长矩形线,如下图所示。我看到的唯一选择是 pointRadius 但这会增加硬件/宽度,所以不会给我想要的尺寸。

谢谢

在此处输入图像描述

0 投票
1 回答
311 浏览

javascript - Image pointStyle 不会在初始图表渲染时加载?

我想为散点图中的一个数据点加载图像。我遇到的问题是图像没有加载到初始页面/图表渲染上。图像仅在您单击/与图表交互时出现。我正在使用react-chartjs-2,任何建议将不胜感激。

我已经尝试了以下(片段)

我也通过了这个,但我应该把这个放在哪里?

如果您设法解决了这个问题,我想问一个第 2 部分的问题,即当您平移图表时,与内置data pointStyle图像不同,它会偏离 y 轴。它仅在图表实际宽度时隐藏

0 投票
1 回答
211 浏览

javascript - 在 react-chartjs-2 中的图表点和边框图表点之间添加空格

我的图表:

和图表选项:

在此处输入图像描述

现在我有这种情况,第二个点停在上边界。我怎样才能解决这个问题?

0 投票
0 回答
730 浏览

javascript - 带有回调函数的 Chart Js 自定义工具提示发送一些细节

问题陈述: 我正在尝试在 ReactJs 中构建 chartJs。我想使用回调函数或类似选项制作自定义工具提示,以便我可以在工具提示中显示详细信息。有没有办法让它成为可能?

ChartJs 工具提示的输出

我的代码: 渲染函数

我想在带有 HTML UI 的工具提示中显示多行。

0 投票
0 回答
292 浏览

javascript - 使用 Chart.js 对选定数据的条件悬停效果

我想使用 Chart.js 在某些条件下禁用数据集某些数据点的悬停效果。

我基本上需要在绘制折线图之前修改数据集,使其看起来像我想要的那样。(例如沿 x 轴延伸线)而且我不希望悬停效果发生在其中一些数据点上。

在实现业务逻辑之后,我寻找了一个可编写脚本的选项 ,这样我就可以使用有关用户所在数据点的上下文。我遇到了基本上取消单个图表上所有悬停效果的解决方案,但不是像我提到的那样有条件地取消。

我尝试将onHover与上下文一起使用并有条件地设置 hoverRadius,它看起来与我预期的一样,但它给了我一个错误,提示“无法分配给对象的只读属性 'hoverRadius'”。

最有可能的是,相关对象已被有意设为不可变。

那么在 Chart.js 中实现这种行为的正确方法是什么?

0 投票
0 回答
85 浏览

reactjs - 获取折线图js的百分比

在此处输入图像描述

反应 ChartJS。我怎样才能制作这样的图表?我有普通类型的线栏,但我也想获得百分比。

谢谢。

0 投票
1 回答
40 浏览

reactjs - 当 yaxis 中的数据数量不等于 xaxis 中的数据数量时,在 Chartjs 2 中绘制折线图

我有两个用于绘制图形的数组。让我用一个例子来说明。

在这种情况下,图形将正确绘制。然后在我的页面中单击某个按钮“A”后,xAxis 被修改为,

但我的 yAxis 将始终与,

在这种情况下,图表将绘制到 xAxis 中的“10:35” 然后单击我页面中的某个按钮“B”后,xAxis 被修改为,

但我的 yAxis 将始终与,

在这种情况下,图表将绘制到 yAxis 中的“6”

他们有什么办法解决这个问题吗?我试图用 react-chartjs-2 在 reactjs 应用程序中实现

***或者,如果开始时间、结束时间和所需的时间间隔被传递给图表,他们是否可以通过任何方式在 xAxis 中分割时间 ***

0 投票
2 回答
270 浏览

javascript - 如何在状态更改期间禁用事件

由于我的代码库很大,我不会添加示例。希望我的问题足够清楚。

我正在使用 react-chartjs-2 来创建一个圆环图。我注意到每一个状态变化都可能在图表上触发和事件。我不知道如何防止图表呈现。

知道如何禁用此行为吗?

谢谢

0 投票
0 回答
919 浏览

reactjs - ChartJS - 甜甜圈段自定义大小

我正在构建一个生成速度计的 React 组件,我想设置每个段的长度(即红色 - 30%、黄色 - 30%、绿色 - 30% 和灰色 - 10%)。

我正在使用 React-ChartJS-2 和动画的 onComplete 我正在绘制文本和针。

我检查了文档,没有设置每个段的长度或宽度。在理想情况下,针应该是绿色的……是的,我们的数字允许 100+%

任何人都知道如何做到这一点,无论是插件还是回调函数,我都可以绑定到它允许我自定义每个段的绘制方式?

在此处输入图像描述

0 投票
1 回答
24 浏览

react-chartjs-2 - chartjs-2 饼图如何去除横线工具提示

我想删除这个愚蠢的内衬工具提示或任何这叫什么 any1 知道怎么做?

在此处输入图像描述