javascript - 具有多级嵌套轴标签的图表库

标签 javascript reactjs charts

概括

我想知道是否有其他人有这个要求并且可以引导我朝着正确的方向前进。我目前正在为交叉表 BI 实现一个图表库,允许在 X 轴上进行多个分组。
例子

我试图实现的功能在 Spotfire 中有效¹,如下所示(开发数据,不是实时的!):
Row (X-Axis) Labels
使用代表交叉表中列的颜色:
Column Labels
¹ - 标签的渲染有点时髦,但分组有效
要求

我希望在(至少)JavaScript 中复制它,如果可能的话,最好使用预制的 React 库。我目前正在查看 d3,特别是 Nivo ,因为这具有吸引团队的漂亮美学,但这似乎仅限于仅在 2 个级别上分组(对于上面的示例,我可以按国家/地区分组,但是我无法按性别分组作为子-团体)。
我试过的

到目前为止,我的解决方案是合并其余层,例如在 France 组中,我们有 Male - Not Tested , Male - Mutant , Male - Wild Type等。这带来的问题是我需要允许最多 6 个级别的分组 - 该示例显示 3 个级别。 (6级很少见,但我需要允许它作为要求)
计划

如果我找不到一个库来做这件事,我的下一步是从 Nivo 分支并尝试修改它以自己实现它,但当然众所周知,这与我们必须实现的时间冲突。我真的很感激听到之前不得不处理这个问题的人的来信,以及你想出的解决方案。

最佳答案

我想你需要结帐AmCharts ,它提供了最好的图表库之一,具有非常丰富的 API,允许您执行多种组合
这是嵌套值轴的示例,但您也可以为 XAxis 生成类似的内容
https://www.amcharts.com/demos/multiple-value-axes/

关于javascript - 具有多级嵌套轴标签的图表库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64680441/

相关文章:

javascript - 如何创建一个表单,单击时输入中的文本会消失? (用于饲料燃烧器形式)

javascript - 列出对象的所有增强

reactjs - 将 brotli 与 AWS Cloudfront + S3 结合使用

java - StackedBarchart 中不同行键的自定义颜色

javascript - 如何在 Meteor 中使用 PureRenderMixin (React js)

javascript - Meteor - session 变量以详细模板显示,而不是 html 代码

reactjs - 在 .env 文件 React 应用程序中设置 PUBLIC-URL

javascript - 使用 clamp.js 在 React 中进行线夹导致 IE11 中的对象错误

javascript - ChartJS堆积条形图的透明间隙

c# - MVC 图表仅显示文本流