Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

设置k线图xAxis.axisLabel.showMaxLabel:true,强制显示最后一个x轴标签时,标签显示不全,被截断 #19615

Closed
soeasyjx opened this issue Feb 13, 2024 · 5 comments
Labels
bug pending We are not sure about whether this is a bug/new feature.

Comments

@soeasyjx
Copy link

soeasyjx commented Feb 13, 2024

Version

5.4.3

Link to Minimal Reproduction

demo

Steps to Reproduce

  1. 通过cnpm 安装5.4.3版本的echarts
  2. 脚本顶部引入echarts ;import * as echarts from "echarts";
  3. 初始化图表 echarts.init(chartDom, null, { renderer: "canvas" })

关键option

{
grid: {
    left: 20,
    right: 20,
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: data0.categoryData,
    boundaryGap: false,
    axisLine: { onZero: false },
    splitLine: { show: false },
     axisLabel: {
      showMaxLabel: true,
      showMinLabel: true,
      formatter(value, index) {
        if (index === 0 || index === 45 - 1) {
          return value;
        }
      }
    }
  }
}

效果图

image

2013/6/13没有显示完全

Current Behavior

一页最多显示45天的k线数据,且只需显示当前可视数据中开始和结束的两个时间标签,当通过 showMaxLabel=true,showMinLabel=true来达到所需要目的时,最后一个标签显示不完全,查看文档,也没有找到相关可以设置最后一个标签偏移量的属性

提示

根据公司UI标注我设置了grid的left,right都为20

Expected Behavior

能够完整的显示最后一个标签

Environment

System:
    OS: macOS 14.1.2
    CPU: (14) arm64 Apple M3 Max
    Memory: 73.36 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.13.1 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  Managers:
    Homebrew: 4.1.24 - /opt/homebrew/bin/brew
    pip3: 21.2.4 - /usr/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 15.0.0 - /usr/bin/gcc
    Git: 2.39.3 - /usr/bin/git
    Clang: 15.0.0 - /usr/bin/clang
    Curl: 8.1.2 - /usr/bin/curl
  Servers:
    Apache: 2.4.56 - /usr/sbin/apachectl
  Virtualization:
    Parallels: 19.1.1 - /usr/local/bin/prlctl
  IDEs:
    Vim: 9.0 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.30.3 - /usr/bin/perl
    Python3: 3.9.6 - /usr/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    SQLite: 3.39.5 - /usr/bin/sqlite3
  Browsers:
    Chrome: 121.0.6167.160
    Edge: 121.0.2277.112
    Safari: 17.1.2

Any additional comments?

No response

@soeasyjx soeasyjx added the bug label Feb 13, 2024
@echarts-bot echarts-bot bot added the pending We are not sure about whether this is a bug/new feature. label Feb 13, 2024
Copy link

echarts-bot bot commented Feb 13, 2024

@soeasyjx It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

Set xAxis.axisLabel.showMaxLabel:true to force the display of the last x-axis label when the last x-axis label is forcibly displayed, and the label is not displayed completely and is truncated

@helgasoft
Copy link

helgasoft commented Feb 13, 2024

yep, frustrating bug 🐛 - being unable to see last date.
Note to developers - does grid.containLabel work only for left-side labels?
Workaround - add an invisible second yAxis: { position: 'right', data:[' '], show:false }

@soeasyjx
Copy link
Author

yep, frustrating bug 🐛 - being unable to see last date. Note to developers - does grid.containLabel work only for left-side labels? Workaround - add an invisible second yAxis: { position: 'right', data:[' '], show:false }

希望能从根本上解决这个问题

@plainheart
Copy link
Member

plainheart commented Feb 14, 2024

#19228 of the coming v5.5.0 may meet your needs. Feel free to try the release candidate and leave your comment.

@helgasoft
Copy link

helgasoft commented Feb 14, 2024

Turns out the reason is simple - grid.right:20 means (only) 20 pixels on right side allowed. Not enough for the last X label.
Solution is to increase grid.right or remove it and let the chart adjust itself - Demo Code.
📌 please close issue if problem solved.

@soeasyjx soeasyjx closed this as completed Mar 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug pending We are not sure about whether this is a bug/new feature.
Projects
None yet
Development

No branches or pull requests

3 participants