问题标签 [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.
chart.js - 当 ChartJS 中没有重叠数据时,以全宽渲染来自多个数据集的条形图
内的例子。作为参考,我使用的是最新版本的 ChartJS (3.2.1) 和最新版本的 react-chartjs-2 (3.0.3)。
我想知道如何在给定多个不同数据集的情况下以特定方式显示我的条形图。我希望图表上的条以标准宽度呈现,同时在必要时允许并排重叠。
当您使用一个数据集时,ChartJS 将以我的“理想”方式处理这个问题,该数据集可能有两个值落在同一个 X 轴坐标上,但在使用多个数据集时我似乎无法模仿这种行为。
似乎每当两个数据集共享一个轴时,条形宽度要么调整以适应两组数据,即使它们不占用相同的空间,或者它们在它们应该占用相同空间时堆叠在一起。我的目标是只在必要时让条“缩小”它们的宽度,否则保持它们的全宽。
这是我希望看到的多个数据集的示例(这就是 ChartJS 在有一个带有barThickness: "flex"
集合的数据集时处理渲染的方式):
这是我使用两个没有任何重叠点的数据集时得到的示例(barThickness: "flex"
两者都设置了):
到目前为止,我什至找到解决此问题的唯一方法是创建多个 x 轴,一个用于一个数据集,一个用于另一个数据集,一个用于重叠。然后,通过操作我的数据结构,为每个轴创建数据集,其中包含与所需条形宽度相对应的数据点。
这当然是一个解决方案,但我正在处理一个生产代码库、数千行数据和几个额外的数据集(所有这些数据集都有不同的状态、可见性条件和规则)。像这样一起管理所有这些几乎是不可能的,更不用说以可维护的方式了。我已经浏览了绝大多数 StackOverflow 问题和 ChartJS 文档,试图找到一个更清洁的解决方案,但到目前为止还不够,希望能得到您的帮助。
以下代码的简化版本。我已经包含了一些未使用的零碎(大部分被注释掉)只是为了展示我迄今为止尝试过的东西:
reactjs - 如何使用功能组件在浏览器中打印 react-chartjs-2 条形图?
这是条形图的示例。我想在浏览器中打印此条形图,因为我尝试了 react-to-print 但它会抛出错误,例如 react-to-print 仅适用于类组件。
reactjs - 【React chart.js】如何使用地图功能向雷达图添加多个数据
我试图弄清楚如何使用地图功能将多个数据放入雷达图。我选择了一些相关的代码如下。
我正在使用 react-chartjs-2。当它在 MotivationtypeChart 组件上调用 this.props.scores 时,该错误反复出现意外关键字“this”。首先是不允许在 datasets 数组中使用 map 函数吗?或者有什么办法可以解决这个问题?我真的很感谢像这里的人这样的熟练程序员的建议。
javascript - 在chart.js的甜甜圈图上显示每条弧线的值
这是图表的配置。
Ps 我知道有一个非常相似的问题,我已经尝试了该线程中提到的解决方案,但我认为当前版本的 Chart.js 不再存在该解决方案。
javascript - 在chart.js的甜甜圈图上显示每条弧线的值
这是图表的配置。
Ps 我知道有一个非常相似的问题,我已经尝试了该线程中提到的解决方案,但我认为当前版本的 Chart.js 不再存在该解决方案。