Question

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

Answer 1

看起来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属性）。

Answer 2

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

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();

        });

高图中两个堆叠图表样式的两种图例样式

2 个答案: