设置宽度时，highcharts 图例项目向左对齐答案

【问题标题】：highcharts legend items align to the left when width is set设置宽度时，highcharts 图例项目向左对齐
【发布时间】：2014-04-07 21:37:40
【问题描述】：

我有一张带有图例的图表。我使图例具有 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',
}

【问题讨论】：

根据文档，看起来你做对了。你有一个我们可以看到这种情况发生的例子吗？（或 ZIP 文件，其中包含您当前的文本文件）
@AndrewNewby 我添加了一个 jsfiddle
看看，我认为问题在于align 选项实际上与 div 本身的浮动（而不是其中的内容）有关。例如，使用 center 会将 div 置于页面中间。我玩得很快，但似乎找不到合适的类来使其居中对齐。
@AndrewNewby 当然，但这写在原始问题中，在 align 属性旁边。 ;)
哦，是的 :) 如果时间允许，我会尝试稍后再看看。否则 - 也许其他人有一些想法

标签： javascript css highcharts

【解决方案1】：

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

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

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

因此，您需要为每个项目计算正确的位置。

【讨论】：

【解决方案2】：

您可以尝试：text-align: right; 而不是“对齐”；
或者您可以尝试在 CSS 中进一步指定元素，例如：

div .example p {

}

我希望这能解决您的问题。祝你好运！

http://www.w3schools.com/cssref/pr_text_text-align.asp

【讨论】：

没有。实际上，我什至尝试在 itemstyle 上设置 textAlign 属性，但它不起作用
在
align 属性后面是否有另一个元素有一个“！important”标签？ "!important" 覆盖所有其他规则。
我也试过 '.highcharts-legend-item span { text-align:right!important; }' 在我的 CSS 中。但它只更改项目内的文本，而不是项目本身。
嗯，我看到您尝试了 textAlign，但正确的代码是 text-align。但它可能只会再次移动文本。是 CSS2/3 吗？还是我弄错了标签？
textAling 是 text-align 的 javascirpt 版本