Highchart Single Legend控制多个图表

Highcharts 允许您使用单个图例（legend）控制多个图表。要实现这一点，您需要在创建图表时设置 legend 配置项，并使用 linkedTo 属性将每个系列的图例项链接到单个图例。

以下是一个示例，展示了如何使用单个图例控制两个图表：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container1" style="height: 300px; width: 50%"></div>
    <div id="container2" style="height: 300px; width: 50%"></div>

    <script>
        // 创建第一个图表
        Highcharts.chart('container1', {
            chart: {
                type: 'line'
            },
            title: {
                text: '图表1'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: '值'
                }
            },
            series: [{
                name: '系列1',
                data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6, 1],
                linkedTo: 'series2' // 链接到第二个图表的系列2
            }]
        });

        // 创建第二个图表
        Highcharts.chart('container2', {
            chart: {
                type: 'line'
            },
            title: {
                text: '图表2'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: '值'
                }
            },
            series: [{
                id: 'series2', // 设置系列ID以便链接
                name: '系列2',
                data: [6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 5]
            }],
            legend: {
                enabled: false // 禁用第二个图表的图例
            }
        });

        // 创建单个图例
        var legend = Highcharts.legend({
            chart: {
                renderTo: 'container1' // 将图例渲染到第一个图表容器中
            },
            title: {
                text: '图例'
            },
            floating: true,
            align: 'center',
            verticalAlign: 'bottom',
            x: 50,
            y: -30,
            shadow: true
        });

        // 将第一个图表的系列添加到单个图例中
        legend.addSeries(Highcharts.charts[0].series[0]);

        // 将第二个图表的系列添加到单个图例中
        legend.addSeries(Highcharts.charts[1].series[0]);
    </script>
</body>
</html>

在这个示例中，我们创建了两个图表，并将它们的系列链接到单个图例。第一个图表的系列1链接到第二个图表的系列2，这样它们就可以共享同一个图例。我们还创建了一个单独的图例元素，并将其放置在两个图表之间。