问题标签 [react-chartjs-2]

我需要用 React-Chart-js2 制作甜甜圈图。图表应如下所示

问题：

1. 我在图表中添加了数据（12%、10% 等）。但是如何添加标签（1星，2星）？
2. 如何将文本（1234 总反馈）放在图表的中心？
3. 是否可以突出显示图像中提到的悬停部分？

代码： const donutChart = {

}

我有一个包含饼图的反应页面。它返回这个 div 以及其他几个 HTML 组件。

我还有 25 个输入字段，它们更新 3 个变量（incomeNum、expenseNum 和 SavingNum），因为在任何输入字段中输入了某些内容（反应中的 onChange 事件）。

newData 函数如下所示。它成功地更新了 3 个变量，没有问题：

饼图应该显示来自incomeNum、expenseNum 和savingNum 变量的数据。我的目标是在填写输入字段时像我一样将饼图动态更新为incomeNum、expenseNum 和savingNum 变量。我的想法是，当我更新这三个变量时，我可以只更新数据源（饼图使用），它会更新饼图，但问题是图表不会自行更新，除非你点击它。我希望它在不单击它的情况下更新。

感谢您阅读本文。

当我悬停一个点时，我在 React js 中使用 chartjs 2 制作了 X 和 Y 轴的折线图，我想在框中同时显示 x 和 y 轴，但我只有 X 轴 这是代码。我用过散点图​​。我希望折线图点悬停与散点图相同。请检查并让我知道解决方案

如何在 ReactJs 中使用库reactchartjs-2和chart.js. 预期的图表如下所示。

图像屏幕截图我正在尝试使用 recharts 或 react-chartjs-2 库为 ReactJS 中的以下图表要求实现多个条形图。我找不到任何可用的直接解决方案。关于如何创建类似类型图表的任何建议

const data = [ { type: "Sample 1", data: [600, 400, 200, 800] }, { type: "Sampel 2", data: [700, 300, 600, 600] }, { type: "Total", data: [1300, 700, 800, 1400] } ];

我们的要求是将条形图呈现为Expected Image。我们正在使用 chartJs 库来呈现图表。我们能够渲染条形图，但对于其中一个条形图，我们需要将背景颜色显示为渐变。为了实现这一点，我们使用了以下代码片段：但它呈现为Rendered graph。你能帮我按预期渲染图表吗？ JSFiddleLink

我在这个链接中有一个工作代码：https ://codesandbox.io/s/keen-darkness-x31u7?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js

我想问一下，有没有可能我们可以将 yaxes 标签的位置更改为顶部？（见下面的预期图片）。

我实际上已经尝试过下面的代码，但它显示在网格线的中间而不是顶部。

电流输出：

预期输出：

我们如何自定义标签并将其隐藏 2 个刻度/行（请参阅下面的预期输出）？我已经尝试了下面的代码，但它什么也没做。我们有没有机会专门隐藏它？

这是我的工作代码，例如单击此处的链接

电流输出

预期产出

我想在我的图表上获得适当的可视化数据，但是因为有 1000 个数组元素，所以它搞砸了。我不想减少数据，但实际上是为了获得适当的可视化，因为在图形的 x 轴中它显示的是 NaN 值。

样本数据（data.json）：

……

想要输出为：

我正在创建一个折线图，x 轴上是月份，y 轴上是值。问题是当有一个数据点时，它周围没有画线。我能够使用注释插件绘制一条水平线，但是当该值> 0 时，我不知道如何绘制一条线，因为它应该是一条曲线。