plotly / plotly/plotly.js

enable labels on separate line for horizontal bar charts

未关闭
#6,389 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

feature P3
主要语言
JavaScript
星标
18.3k
派生
2k
平均合并
2 天 12 小时
30 天内合并 PR
28

描述

This feature would make horizontal bar charts readable with long tick labels and narrow screens. Other libraries have this feature.

Suggested option:
ticklabelposition="inside above".

Suggested output:
Screenshot 2022-12-06 at 9 05 44 pm

However, current subplot workaround fails due to memory heap size dramatically increasing with row numbers (100+). It's also challenging to get the label position and grid lines correct. Mirroring axes also not possible.
https://dkane.net/2020/better-horizontal-bar-charts-with-plotly/ by @drkane

There is a javascript workaround I have seen however, I cannot get this to work on my dashapp.
https://medium.com/@tbarrasso/plotly-tip-6-positioning-axis-titles-in-horizontal-bar-chart-56b0713f9745

  var yAxisLabels = [].slice.call(document.querySelectorAll('[class^="yaxislayer"] .ytick text, [class*=" yaxislayer"] .ytick text'))
  var bar = document.querySelector('.plot .barlayer .bars path')
  var barHeight = bar.getBBox().height
  var offset = 12
  
  for (var i = 0; i < yAxisLabels.length; i++) {
    var yAxisLabel = yAxisLabels[i];
    yAxisLabel.setAttribute('text-anchor', 'start')
    yAxisLabel.setAttribute('y', yAxisLabel.getAttribute('y') - (barHeight / 2) - offset)
  }
})```

Any input appreciated.

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先跟踪 plotly.js 中水平条形图的坐标轴和刻度标签渲染,以请求的 ticklabelposition="inside above" 行为为目标。将现有的 subplot 和 JavaScript 变通方案与附带示例进行比较。当窄水平条形图中的长标签能够渲染在单独一行上,且不存在已报告的内存、定位、网格线或坐标轴镜像问题时,即可视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript
领域
data-visualization
Issue 类型
功能
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。