Question

xAxis的空间通常由Highcharts库动态呈现，并在正确的位置添加省略号，使其从一开始就显示，并在它停止在带有某些省略号的图形上停止显示时将其剪切。

当我尝试更改该空间以使其不动态呈现时，属性marginBottom可以做到这一点，但是当文本应开始显示并且文本的开头从图形的下方切下时，它将停止拾取。有没有办法正确显示高图底部的文本？我确实需要将其旋转270度，不要让自动旋转起作用，也不想为了显示文本而折叠图形的更多部分。

以下是发生这种情况的示例：

Highcharts.chart('container', {
    chart: {
    height: 350,
    spacingBottom: 0,
    marginBottom: 50,
        type: "column"
   },

  series: [{
      name: 'Total', 
      data: [1,2,3,4,5]
    }],

  xAxis: {
    categories: ["very long name to test if the characters are rigth and cropped", 
                            "Not so long but long enough", "I still am long and out of the screen", 
                "lets see how is cropped", "cropped", "crop"],
    labels: {
        rotation: 270
    }
    }
});

使用marginBottom采样小提琴：https://jsfiddle.net/ragmar/6ru4hze3/

如果您删除marginBottom，则即使图例也会向下移动。

可能会发生这种情况？甚至包括一些CSS？

预先感谢

Answer 1

要使其按您想要的方式工作，您必须在Highcharts核心中进行一些修改。例如，您不能使用marginBottom选项，而是在commonWidth方法中将固定值设置为renderUnsquish变量：

if (attr.rotation) {
  commonWidth = (
    maxLabelLength > chart.chartHeight * 0.5 ?
    40 :  // changed from 'chart.chartHeight * 0.33'
    maxLabelLength
  );
  if (!textOverflowOption) {
    commonTextOverflow = 'ellipsis';
  }
}

实时演示：https://jsfiddle.net/BlackLabel/moL1tw6c/

Higcharts-marginBottom不允许渲染xAxis系列省略号

1 个答案: