问题标签 [react-google-charts]

我正在开发反应应用程序，我使用反应谷歌图表来显示带有注释的折线图。但是我遇到了折线图中列的角色属性问题，已经在工作组件中导入了 react-google-charts。下面是我的代码：

Home.tsx > 组件

虽然我可以在 node_modules 目录下找到类型模块，如下所示：

node_modules\react-google-charts\dist\types.d.ts

已经按照其他人的建议在 webpack.config.js 文件中添加了以下代码：

我仍然收到模块未找到错误。请建议..

我正在尝试使用谷歌图表创建条形图，但我需要反转条形的方向。我已经通过设置实现了hAxis: { direction: -1,} 但问题只是条形图的方向是相反的，并且没有相应地放置 y 轴标签，如图所示。

如何将 y 轴标签的位置更改为 y 轴的右侧？我的代码：

我正在使用 React Google Charts 插件，并且一直在努力实现这一点。问题如下。我想根据用户选择的数字在直方图上画一条线，该数字存储在一个状态中。展示我想要实现的目标的最佳方式是通过图像。

在此示例中，用户将选择数字 40。因此在数字 40 上绘制一条垂直线 (x=40)。

这是直方图的 React 代码。

这是每个组件的样式：

我准备使用黑客来实现这一点，尽管我更喜欢更清晰的答案。如果有人知道通过 css 定位、谷歌图表 api 甚至一些纯 javascript 解决方案来实现这一目标的聪明方法，我将非常感激。

PS：如果需要任何额外的信息，我很乐意提供。

PPS：应@m4n0 的要求，我创建了一个代码框，以便任何人都可以访问代码本身。这是链接：https ://codesandbox.io/s/react-charts-vertical-line-over-graph-lpw52?file=/src/index.js

我正在尝试建立一个甜甜圈图

我想要一个类似于下图的设计，其中的值显示在彩色饼图之间

所以我有以下代码，我在其中获取要在我的组件中呈现的数据。但是，如果将 useEffect 设置为运行一次，它不会在组件内部渲染数据，并且一直运行它是不可持续的。

我想使用谷歌图表对 X 轴上的月份名称进行排序。我目前使用dataGroup.sort([{column: 0}]);按字母顺序排序。我如何对当月的值进行排序？

dataGroup 现在有类似的数据 -

这就是我想要做的。

如果您查看当前的屏幕截图，我正在尝试将其从完整的圆环饼图从完整的圆圈变为一半。

这是我当前用于饼图的 Google 图表代码：

我怎样才能使它成为一个带有标签的半圆形图表？

这就是我想要做的。我正在尝试放置多个 Google 饼图，我已经将代码放入其中，但是，我收到以下错误消息：

未捕获的类型错误：无法读取未定义的属性“arrayToDataTable”，我收到另一条错误消息：错误：arrayToDataTable 的数据不是数组。

这是我现在正在使用的代码：

这是谷歌图表代码：

什么可能导致这些问题？

谢谢！

我正在用下面给出的谷歌折线图制作折线图

但问题是我安慰rows它显示的像[1,0,0],[2,0,0],[3,0,0],[4,0,0],[5,0,0],[6,0,0],[7,0,0],[8,0,0],[9,0,0],[10,0,0],[11,0,0],[12,0,0],[13,0,0],[14,0,0],[15,0,0],[16,0,0],[17,0,0],[18,2000,11000],[19,0,0],[20,0,0],[21,0,0],[22,0,0],[23,0,0],[24,0,0],[25,0,0],[26,0,0],[27,0,0],[28,0,0],[29,0,0],[30,0,0],[31,0,0]和

当我在其中静态添加它时，data.addRows([[1,0,0],[2,0,0],[3,0,0],[4,0,0],[5,0,0],[6,0,0],[7,0,0],[8,0,0],[9,0,0],[10,0,0],[11,0,0],[12,0,0],[13,0,0],[14,0,0],[15,0,0],[16,0,0],[17,0,0],[18,2000,11000],[19,0,0],[20,0,0],[21,0,0],[22,0,0],[23,0,0],[24,0,0],[25,0,0],[26,0,0],[27,0,0],[28,0,0],[29,0,0],[30,0,0],[31,0,0]]); 它会正确显示图表，但是当添加它时，data.addRows([rows]);它会显示如下错误

未捕获（承诺中）错误：第 0 行不是空值或数组。

有人可以帮我吗？

我使用 Node.js 获得了一些数据。我有一个带有 Google Chart 的 HTML 文件。我想将我在 Node.js 中获得的信息发送到我的 HTML 中的 Google Chart，这样当我打开页面时，我可以看到带有我在 Node.js 中获得的信息的图表。

我不知道该怎么做。我需要在图表中显示这些数据。如何将此数据从 js 文件发送到 HTML 文件中的图表？

HTML

JS