Highcharts - 如何在调整图表尺寸时调整图例大小？

Question

有没有办法在调整图表大小时动态设置图例项的特定宽度？我的图例中可能会出现一些非常长的项目名称，因此我需要指定一个宽度来强制文本换行，但是我希望在图表宽度变化时更改宽度。谢谢。

- Julie

Answer 1

我找到了一个更好的解决方法：

chart.legend.options.width = newwidth;
chart.legend.itemStyle.width = newwidth;
for(var index in this.chart.series) {
        chart.legend.destroyItem(chart.series[index]);
}
chart.legend.render()

- Julie

Answer 2

通常情况下是不可能的，但你可以禁用 highcharts 的图例，并准备一个自己的 div（绝对定位），其中包含所有系列的列表和点击事件。这里提供了一个简单的示例。

$legend = $('#customLegend');

    $.each(chart.series[0].data, function (j, data) {

        $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');

    });

    $('#customLegend .item').click(function(){
        var inx = $(this).index(),
            point = chart.series[0].data[inx];

        if(point.visible)
            point.setVisible(false);
        else
            point.setVisible(true);
    });        

http://jsfiddle.net/N3KAC/10/

那么你需要做的就是通过捕获$(window).resize()函数并调整元素大小，将其适应于你的图表。

- Sebastian Bochan

---

谢谢，但是有没有办法将自定义图例添加到导出的图片中？或者也许有一种方法可以销毁并重新绘制Highcharts图例？ - Julie

哦，算了吧。我意识到我只需设置useHTML:true，然后使用jquery更改图例项的宽度即可。 $('.highcharts-legend-item span').width(800) 我不知道为什么上周五我没有想到这个方法。不过还是谢谢你！ - Julie