javascript - 具有多级嵌套轴标签的图表库
问题描述
概括
我想知道是否有其他人有这个要求并且可以引导我朝着正确的方向前进。我目前正在为允许在 X 轴上进行多个分组的交叉表 BI 实现图表库。
例子
我试图在 Spotfire 中实现的功能¹ 如此处所示(开发数据,不是实时的!):
使用代表交叉表中列的颜色:
¹ - 标签的渲染有点时髦,但分组工作
要求
我希望在(至少)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/生成类似的东西
推荐阅读
- python - Micropython Esp8266 Sympy
- ios - UIView 未以编程方式显示在 UIScrollView 中
- go - 无法通过 -extldflags
- android - 为什么没有在 Android 上的 Laravel 中验证文件?
- javascript - 如何从登录页面注销用户?
- laravel - 在减去两个日期以给出天数时遇到格式不正确的数值
- flutter - Flutter Cupertino bottom_tab_bar:'方法'方法'在 null 上被调用'
- vue.js - Vuetify v-text-field 检查非数字输入
- angular - 如何引用 FormArray 的各个控件
- swift - 解析谷歌自定义搜索 API Swift