问题标签 [react-chartjs]

I've recently been working on a project involving Chart.JS. I'm looking to scale the x-axis so that 50% width goes from values 0-100 while the other 50% width of the chart goes from 100 - 1000.

I'm using a horizontal stacked bar chart with 3 datasets. This can be seen here

What I'm trying to achieve is something like this here, except the 500 would be 100 and the 1000 would remain 1000. i.e. the graph wouldn't have a linear scale.

I'm attempting to do this as anything above around 150 is pretty much an outlier and I'm not worried about it going over 1000.

Here is my current config for the chart (I'm using react-chartjs and react)

I've react the documentation on chart.js and viewed some GitHub issue posts but can't find to find anyone with a similar problem. Maybe I'm misunderstanding one of the properties of the ticks object.

Anyway, thanks to everyone and anyone that replies! Will edit once I find a solution.

Chart Config Code Block

我们目前正在使用 react-native 开发移动应用程序。

该应用程序需要在其中显示水平条形图，因此我们曾经KittyCookie/react-native-chartjs实现过相同的功能。

调试时图表可以正常工作，但是当我们生成应用APK并打开应用时，图表没有渲染。它显示一个空白的白页。

想法赞赏。

这是我的用例：我有两个图表，一个在另一个之上，如此处所示。理想情况下，它们将是单个图表中的两个数据集，但我想不出一种方法可以在另一个图表中途启动一个图表（尤其是在流延迟的情况下）。无论如何，两个数据集都应该具有相同的最大和最小比例。

我可以在创建时手动给它们相同ticks: { min, max}的值，但是我的数据集中的值范围太大，无法在开始时设置一次并离开它们。所以，我必须让 Chart.js 根据图表中当前的数据为我计算比例。但由于两条线的数据略有不同，因此生成的比例略有不同，您可以在上面的 gif 中看到它们在不同时间重新缩放。

我尝试使用较大的图表chart.scales["y-axis-0"].max和min从options: plugins: streaming: onRefresh:函数内部设置父组件的状态，然后尝试在其onRefresh. 但是第二张图表似乎忽略了更新的值（或者我设置的值实际上并不控制比例）。

那么，在多个图表中保持比例同步的最佳方法是什么？

我正在使用 react-chartjs2 lib，我得到了这样的东西

现在我想知道是否有办法在今天的注释线上切割蓝线？

像这样的东西：

如果我只是在今天的注释中剪切数据，我会得到下降线，它看起来很丑，所以这就是为什么我想对上面这样的事情做

有任何想法吗？提前致谢。

请注意，这是在 react 和 using 中react-chartjs-2。

我有一个简单的条形图，其中包含 3 个已chartjs-plugin-datalabels启用的数据集，因此我可以看到条形上方的标签。

打开已经隐藏的数据集将使数据标签与栏一起正确设置动画。但问题是，当我隐藏数据集时，标签不会更新，因此它们会在我隐藏该数据集之前静态浮动到条形高度所在的位置。

我需要设置哪些选项才能与栏一起更新？

图例选项：

谢谢您的帮助。

我正在尝试从 ChartJS 中的 api 绘制加密货币。Axios 调用进展顺利，带有键值对的对象被获取。但是当我想 setState 将它们推入图表（数据属性）并且我正在记录我的状态时，它只返回两个空的数据集和标签数组

我是 React 新手，我想为条形图设置不同的宽度，看起来像bar chart。

我正在使用 react-chartjs 但我找不到解决方案。我目前的代码是：

它看起来像：我的图表

对于我的项目，我使用 React 和 Jest/Enzyme。我构建了一个可重复使用的圆环图组件，并使用一个插件在圆环图的中间呈现文本。这是我的代码。

这段代码完美地为我显示了图表和中间的文本。我的问题是当我尝试为这个组件编写测试时，它说插件的行没有被覆盖。我在这里有一个基本测试，用于测试组件呈现本身及其道具。

我猜该插件会在绘制图表时应用所有配置更改，所以我不明白为什么测试没有命中插件行。

如果有人能告诉我如何测试插件或指导我正确的方向，我将不胜感激！谢谢！

我正在使用react-chartJs-2库来显示图表。假设，用户点击条形图/甜甜圈图部分，他必须被重定向到特定页面。以下是我为 DoughnutChart 编写的代码：

1. ChartDisplay.jsx

2. 甜甜圈.jsx

   /li>

我浏览了 github 页面，发现以下事件可用于点击事件，但不知道如何在我的代码中使用它。

https://github.com/jerairrest/react-chartjs-2#onelementsclick--getelementsaevent-function

我正在尝试将动态颜色推送到我的图表中，但我很难这样做。在我的状态下，我的数据集的对象数组中有背景颜色。但是，我不确定如何将动态颜色推入其中。

我需要推送所有这些颜色的原因是因为我最终要从我的数据集中的数据库中提取动态数据，所以我决定为图表创建随机动态颜色。硬编码数据现在是占位符。

我在网上读到我可以使用 Immutability Helpers 来实现将这些颜色推送到深层嵌套对象中，但我很难弄清楚。

这是我的代码：