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

javascript - 如何在 react-chartjs-2 中更改甜甜圈的文本大小?

如何更改甜甜圈的文本大小react-chartjs-2

这个中心的文字太小了。

在此处输入图像描述

0 投票
2 回答
1334 浏览

javascript - 图例未显示在折线图或条形图上 - React-Chartjs-2

我在让图例显示在我的反应仪表板中的几个图表上时遇到了一些困难。我正在使用 React-Chartjs-2 。图例最初是有效的,然后我测试了在 Chart.default 属性中关闭图例,当我尝试重新打开它时,它们没有重新出现。

我的全局图表设置如下:

我的折线图、条形图和圆环图的本地图表属性都遵循类似的布局,即:

如您所见,Legends 在全局和本地设置中均已打开。目前,只有圆环图显示它的图例。切换 display:true 值只会将折线/条形图的底部上下移动少量。

有人遇到过类似的问题吗?

0 投票
1 回答
870 浏览

reactjs - 如何删除折线图背景中的网格线?

我正在开发一个 React JS 项目。在我的项目中,我需要创建折线图组件。我正在尝试将Chart JS 2库用于 React JS。但是,现在我在自定义折线图时遇到了一点问题。我想删除背景中的网格和线条(屏幕截图)以及图表顶部的标签(我的第一个数据集)。

在此处输入图像描述

这是我的代码。

我怎样才能做到这一点?删除图表背景中的网格(线)并删除顶部的标签(我的第一个数据集)?

0 投票
2 回答
2305 浏览

javascript - 反应图表:防止图表的画布随高度和宽度缩放

我正在使用 react-chart-js 中的水平条(https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/Horizo​​ntalBar.js),如下所示,

我尝试将高度直接应用于 div 或水平条以限制画布的放大,但它仍然可以解决。是否可以分别为图表的画布提供高度和宽度。

0 投票
2 回答
559 浏览

reactjs - 标题左对齐 React Chart.js V2

我正在尝试将标题对齐到左侧而不是中心(如图所示)。

我知道这在 chartJS 上是可能的,v3.0.0-alpha.2但据我所知。reactchartjs2.9.30

有谁知道如何实现这一目标reactchartjs

我认为它会是这样的:

任何帮助,将不胜感激。

图表显示

0 投票
1 回答
717 浏览

reactjs - Chartjs:制作方形图例

使用 react-chartjs-2,创建条形图如下。我正在尝试将图例制作成方形而不是默认矩形。

我应用了 boxWidth: 10 如下但它不起作用,是否有任何其他可能的替代方法来生成方形图例

0 投票
1 回答
50 浏览

css - 如何使用 chart.js(react-chartjs-2) 实现类似此图像的效果?

在此处输入图像描述

是否有可能实现这一点-

  1. 同一条中的不同颜色
  2. 颜色长度与当年可用数据的百分比成正比

总共有 4 年,我想将每个条分成最多 4 个部分(可以是 1、2、3 或 4 个部分,具体取决于选择的年份)。

0 投票
2 回答
1536 浏览

reactjs - 如何在 React 中的 ChartJS 中始终显示标签

我试图让我的数据点在折线图上始终显示一个值。像这样:

在此处输入图像描述

我找到了一个适用于 ChartJS vanilla 的解决方案,但无法弄清楚如何将 ChartJS 与 React 一起使用(最好使用功能组件)。

到目前为止,我有一个简单的图表,如下所示:

有谁知道从这里去哪里?

0 投票
0 回答
215 浏览

javascript - 如何在chart.js中分别设置两个标签的样式

有谁知道如何将不同的样式应用于chart.js 中标签数组中的数组中存在的元素。请参阅下面的内容以了解我的意思。

我做了图表,看到标签显示在两条线上 1.温度 2.时间

在此处输入图像描述

但我希望标签看起来像这样:

在此处输入图像描述

我应该如何设计标签?

0 投票
0 回答
229 浏览

javascript - 使用 react-chartjs-2 对多个图表进行分组

在此处输入图像描述

我想用react-chartjs-2创建一个类似于上图的动态图表。基本问题定义是将具有相同基轴的多个图表分组。图表中的每个条形都有其标签(所有图表都有相似的),每个图表都有其标题(或考虑基轴的标签)。我很困惑我该如何准备dataset

图表的示例数据:

我只想知道如何将这些数据形成为像图像一样的图表。此外,如果有人可以帮助设计酒吧,那将非常有帮助。谢谢。