jquery - highchart中两种堆叠图表样式的两种图例样式

Question

我在高图中有两种类型的图表，一种是列型，另一种是线型（它们有自己的系列）。所以我希望两个不同图表（线和柱）的图例有两个不同的位置，一个在左下角，另一个在右下角。这可能吗？

Answer 1

不幸的是，不支持此选项，但您可以使用 append 将 div 数量添加为系列，并捕获点击事件。

http://jsfiddle.net/8JB6h/

$.each(chart.series, function (i, serie) {

            $('body').append('<div class="legend" id="serie' + i + '">' + serie.name + '</div>');


        });

        $('.legend').click(function () {
            var tmpserie = chart.get($(this).attr('id'));
            if (tmpserie.visible) tmpserie.hide();
            else tmpserie.show();

        });

Answer 2

看起来 highcharts 不支持使用 legend 属性的两个图例。但是，它确实支持标签，您可以将其放置在图表的任何位置。它更加繁琐，但您可以使用它们在任何您想要的地方呈现您自己的标签。

一个基本的例子是：

      labels: {
        items: [{
            html: "Legend 1",
            style: {
                top: '10px',
                left: '20px',
                height: '30px'
            }
        }, {
            html: "Legend 2",
            style: {
                top: '10px',
                left: '120px',
                height: '30px'
            }
        }]
    },

http://jsfiddle.net/7PRKr/

你必须做一些数学计算来计算它们在你的绘图区域内的位置，并且你必须做一些工作来使它们看起来不错（使用标准的 html 和 css 属性）。