javascript - highcharts 图例元素在设置宽度时向左对齐

Question

我有一张带有图例的图表。我使图例具有 380 像素的固定宽度，并且我希望图例项始终在此图例框内右对齐。默认情况下，它们向左对齐。

这些是图例的属性:

... legend: {
        align: 'right', //this align the legend box , not the items
        verticalAlign: 'top',
        borderWidth: 1,
        width: 380,
        floating: true,
        x: -35,
        symbolRadius: 0,
        symbolWidth: 10,
        symbolHeight: 10,
        enabled: true,
        itemStyle: { //I even tried this but with no lick
            textAlign: 'right',
        }
    }, ...

这是图例框的样子:

我希望这 2 项位于框的右侧。

这里是图表的 jsfiddle 没有做我想做的事:

http://jsfiddle.net/MaurizioPiccini/d746v/9/

我尝试过的:

1- 将其放入我的 CSS 中只会更改元素内文本的对齐方式，但不会将元素与框右侧对齐。

.highcharts-legend-item span {
     text-align:right!important;
}

2- 将其添加为图例上的属性对齐图例框，而不是元素

 align: 'right', 

3- 将其添加为图例中的属性也不起作用:

itemStyle: { //I even tried this but with no lick
    textAlign: 'right',
}

Answer 1

一般不支持。但是，您可以尝试通过手动将图例组翻译到右侧来实现这一点。您将需要在每次调整图表大小时或重新绘制图例时更新该位置。

这是它的示例:http://jsfiddle.net/d746v/10/

                this.legend.allItems[0].legendGroup.attr({ // 0 - first series, 1 - second series etc.
                    translateX: 320
                });

因此，对于每个元素，您都需要计算适当的位置。