Question

我把y轴标题放在轴的顶部，以可读的方式（因此，转90°;像here）。但事实是，y轴标题越长，图形就越被推开。我可以用“偏移”来纠正。

title: 
{
  text: "Very important data here",
  align: 'high',
  rotation: 0,
}

现在，我有很多图表。并且所有这些翻译都有三个翻译（de，en，fr）作为同一图表中的文本元素。所以，代码总是一样的。没有可能手动适应每次平移偏移。

因此，我试图找到一个公式来计算短标题和长标题（如here）的正确偏移量。现在，我正在使用“ offset：txt.length * -5.5 ”;但是标题越长越好。试图使用SQRT，但没有真正成功。

offset: txt.length * -5.5,

有没有人有一个简洁的方法来做到这一点？

Answer 1

你可以让Highcharts使用错误的偏移量绘制默认图表，然后计算标题的宽度并简单地更新偏移量：

chart: {
        events: {
            load: function () {
                var chart = this,
                    yAxis = chart.yAxis[0],
                    firstLabel = yAxis.ticks[yAxis.tickPositions[0]].labelBBox.width,
                    lastLabel = yAxis.ticks[yAxis.tickPositions[yAxis.tickAmount - 1]].labelBBox.width,
                    bb = yAxis.axisTitle.getBBox();
                yAxis.update({
                    title: {
                        offset: -bb.width + (firstLabel > lastLabel ? firstLabel : lastLabel) //make sure that will be enough space for yAxis labels
                    }
                });
            }
        }
    }

并且jsFiddle：http://jsfiddle.net/kL5md/6/

Highcharts 4.x演示：http://jsfiddle.net/kL5md/21/

Answer 2

当系列动态添加到图形时，上面的代码不起作用。在这种情况下，只需将上面的代码放在series对象下的afterAnimate事件中。

plotOptions:{
                series:{
                    events:{
                        afterAnimate: function(){
                            console.log('test', this.chart.yAxis[0]);
                            var chart = this.chart,
                            yAxis = chart.yAxis[0],
                            tp = yAxis.tickPositions,
                            firstLabel = yAxis.ticks[tp[0]].label.getBBox().width,
                            lastLabel = yAxis.ticks[tp[tp.length - 1]].label.getBBox().width,
                            bb = yAxis.axisTitle.getBBox();

                            yAxis.update({
                                title: {
                                    offset: -bb.width + (firstLabel > lastLabel ? firstLabel : lastLabel) + 15
                                }
                            });
                        }
                    }
                },
            }

当具有不同长度的y轴标题时，Highcharts中的自动y轴标题偏移是否可能？

2 个答案: