如何更改 Highchart 中图例的布局和对齐方式？答案

【问题标题】：How to change the layout and the alignment of the legend in the Highchart?如何更改 Highchart 中图例的布局和对齐方式？
【发布时间】：2014-04-16 20:07:20
【问题描述】：

我正在尝试更改 Highchart 中图例的布局和对齐方式。

在 JavaScript 中，代码最初是：

showInLegend: true

然后我修改为：

legend: 
{
    layout: 'vertical',
    enabled: true,
    x: 0,
    y: 20,
    align: 'right',
    verticalAlign: 'middle',
    margin: 30,
    ...
}

...然而，传说仍然没有移动。

【问题讨论】：

你能设置一个代表 jsFiddle 来重现这个问题吗？
那么在图表初始化之后你想更新图例吗？
谢谢。我不太清楚你的意思，但我想改变传说的对齐方式。也就是说，我希望图例是垂直的，而不是目前的水平。

标签： javascript jquery css highcharts legend

【解决方案1】：

确保您的图表选项中没有重复的属性legend。

在一般情况下它有效，请参阅：http://jsfiddle.net/3bQne/1010/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container1'
    },
    legend: {
        layout: 'vertical',
        enabled: true,
        x: 0,
        y: 20,
        align: 'right',
        verticalAlign: 'middle',
        margin: 30
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    }]
});

【讨论】：