我有一张带有图例的图表。 我使图例具有 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',
}
最佳答案
一般不支持。但是,您可以尝试通过手动将图例组翻译到右侧来实现这一点。您将需要在每次调整图表大小时或重新绘制图例时更新该位置。
这是它的示例:http://jsfiddle.net/d746v/10/
this.legend.allItems[0].legendGroup.attr({ // 0 - first series, 1 - second series etc.
translateX: 320
});
因此,对于每个元素,您都需要计算适当的位置。
关于javascript - highcharts 图例元素在设置宽度时向左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22910614/