VChart图表的轴标签如何做截断,换行等效果?

阅读 3.2k
2 个回答
✓ 已被采纳

解决方案 Solution

不同图表库的解决方案不一样,根据你给的demo,在VChart中只需要配置axes 中对应轴的label相关配置:

  • 通过formatMethod返回数组,可以实现自定义换行
  • 通过style.maxLineWidth可以实现自动截断
  • 通过style.ellipsis可以设置省略符
    image.png

代码示例

Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        {
          name: 'Apple https://www.apple.com/',
          value: 214480
        },
        {
          name: 'Google https://www.google.com.hk/',
          value: 155506
        },
        {
          name: 'Amazon https://www.amazon.com/',
          value: 100764
        },
        {
          name: 'Microsoft https://www.microsoft.com/',
          value: 92715
        }
      ]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'name',
  axes: [
    {
      orient: 'bottom',
      visible: false
    },
    {
      orient: 'left',
      label: {
        formatMethod: (text, datum) => {
          return text.split(' ');
        },
        style: {
          maxLineWidth: 100,
          ellipsis: '~'
        }
      }
    }
  ],
  label: {
    visible: true
  }
};

结果展示

在线效果参考:https://codesandbox.io/s/axis-label-auto-limit-pnsvzl

image.png

相关文档

坐标轴demo:https://www.visactor.io/vchart/demo/axis/animation

坐标轴教程:https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Conc...

相关配置:https://www.visactor.io/vchart/option/barChart#axes-band.labe...

github:https://github.com/VisActor/VChart

看了下文档,能试的只有这个属性了。
image.png

另外,如果这个库不支持自定义坐标轴内容,可以考虑:
1.禁用坐标轴,自己写一个定位上去
2.换支持自定义的图表库

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题