改变Highcharts图例显示后渲染

Change Highcharts Legend Display After Render

本文关键字：显示 Highcharts 改变更新时间：2023-09-26

是否可以在图表呈现后更改Highcharts显示设置?还是我总是需要re绘制图表?

看，在屏幕调整中，我希望将图例框从右边移动到下面，如图所示:——示例图片

编程，我需要的是改变代码从

来自:

legend: {        
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
}

:

legend : {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom',
}

。

多谢!

解决方案:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BBBIndex</title>
    @*credit goes to http://stackoverflow.com/questions/33755669/highcharts-change-legend-options-dynamically*@
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).ready(function () {
                // Build the chart
                $('#container').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    },
                    title: {
                        text: 'Browser market shares January, 2015 to May, 2015'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        name: 'Brands',
                        colorByPoint: true,
                        data: [{
                            name: 'Microsoft Internet Explorer',
                            y: 56.33
                        }, {
                            name: 'Chrome',
                            y: 24.03,
                            sliced: true,
                            selected: true
                        }, {
                            name: 'Firefox',
                            y: 10.38
                        }, {
                            name: 'Safari',
                            y: 4.77
                        }, {
                            name: 'Opera',
                            y: 0.91
                        }, {
                            name: 'Proprietary or Undetectable',
                            y: 0.2
                        }]
                    }]
                });
            });
            $("#btnProgChgLegend").toggle(
                function () {
                    var c = $('#container').highcharts();
                    var o = c.options;
                    o.legend.layout = "vertical";
                    o.legend.align = "right";
                    o.legend.verticalAlign = "top";
                    //next line is key
                    c.legend.render();
                },
                function () {
                    var c = $('#container').highcharts();
                    var o = c.options;
                    o.legend.layout = "horizontal";
                    o.legend.align = "center";
                    o.legend.verticalAlign = "bottom";
                    c.legend.render();
                });
            });
    </script>
</head>
<body>
    <div>
        <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
        <button type="button" id="btnProgChgLegend">Change Legend Programmatically</button>
    </div>
</body>
</html>