javascript - Highcharts 自定义文本从右到左导出

Question

我的问题是我有一个图表，上面有一些自定义文本，这些文本必须位于图表的右上角和上下 Angular ，我正在使用 renderer.text('text', 600, 30).add();

我一开始喜欢 renderer.text('text', 600, 30).css('direction': 'rtl').add();这工作正常但是当我导出时它不识别 STLye

然后我尝试使用 renderer.text('<span style="direction:rtl;">text</span>', 600, 30).add();这也只能在页面上显示它，但导出不会

有什么方法可以解决此问题以用于导出吗？

sample

Answer 1

避免针对此特定问题的整个“CSS 和导出”问题的方法是使用文本的边界框来正确放置它，而不是 CSS 解决方案。

function (chart) { // on complete
    var rightTop = [590,85];
    var element = chart.renderer.text('This is a looooong text', 0, -100).add();
    var boundingBox = element.getBBox();
    element.destroy();
    chart.renderer.text('This is a looooong text', 
            rightTop[0] - boundingBox.width, 
            rightTop[1]).add();
}

这里的 rightTop 变量表示我们希望放置它的位置。然后添加文本(超出视野)，我们得到边界框知道它的大小，然后销毁它。然后我们在正确的位置重新创建文本。

参见 this JSFiddle example演示它是如何工作的。