Question

我试图在高图中调整雷达图表的X轴标签，我无法修复2个标签。当它在小宽度屏幕上时，一些标签看不到完全。附上截图 img

这是小提琴链接：

https://jsfiddle.net/xs9zb3f6/6/ enter code here

有人可以帮忙吗？我希望标签能够在雷达图表或自动换行内进一步对齐，这样当它在小屏幕上时，它就不会切断字样。

Answer 1

您可以编写自己的功能来移动标签。

获取label元素的bbox并检查它是否在容器内（＆gt; = 0或＆lt; = container＆＃39; s宽度）。获取bbox的一个警告 - 标签是旋转的，所以这意味着你获得的bbox具有尚未旋转的元素的参数 - 在你的情况下旋转不会大幅改变文本宽度 - 你可以添加一些像素抵消这种差异。

package main

在加载/重绘事件上移动标签：

function moveLabels() {
  const ticks = this.xAxis[0].ticks;
  const safeDistance = 10;

  Object.keys(ticks).forEach(value => {
    const label = ticks[value].label;
    const bbox = label.getBBox(true);

    if (bbox.y >= 0) {
      if (bbox.x - safeDistance < 0) {
        label.attr({
          x: label.xy.x + Math.abs(bbox.x - safeDistance)
        })
      } else if (bbox.x + bbox.width + safeDistance > this.chartWidth) {
        label.attr({
          x: label.xy.x - (bbox.x + bbox.width + safeDistance - this.chartWidth)
        });
      }
    }
  })
}

示例：https://jsfiddle.net/nd5fob5d/

x轴标签自动换行在雷达图表的高图表中

1 个答案: