在窗口调整大小时调整Highcharts图例的大小

时间:2016-05-05 09:12:53

标签: javascript html highcharts width highstock

我想更改Highcharts图例的大小(尤其是宽度)。以下是我根据我所做的研究尝试使用的一些代码:

            $(window).resize(changeSummaryLayout);

            function changeSummaryLayout() {
                var w = window.innerWidth;
                if (w < 1370 && w > 992) {
                    for (i = 0; i < charts.length; i++) {
                        charts[i].highcharts().setTitle({ x: -5 });
                        charts[i].highcharts().legend.options.y = 150;
                        charts[i].highcharts().margin[3] = 0;
                        charts[i].highcharts().legend.options.width = 200;
                        charts[i].highcharts().legend.itemStyle.width = 200;
                        for (var index in charts[i].highcharts().series) {
                            charts[i].highcharts().legend.destroyItem(charts[i].highcharts().series[index]);
                        }
                        charts[i].highcharts().legend.render();
                        //charts[i].highcharts().legend.update({ itemStyle150 });
                        //charts[i].highcharts().isDirtyLegend = true;
                        //charts[i].highcharts().redraw();
                        //charts[i].highcharts().isDirtyBox = true;
                    }
                    $('#chartContainer').css('height', '400px');
                    $('.pieChartTotal').css('height', '390px');
                    $('.pieChartCanvasSum').css('height', '330px !important');
                    $('.highcharts-container').children().css('height', '330px');
                    $('.highcharts-background').attr('height', '330px');
                }

这些解决方案都没有改变宽度的工作,奇怪的是,只有在我将鼠标悬停在图例之后才会更新宽度。任何人都可以向我解释为什么会发生这种情况?

有没有可以在这里使用的解决方案?

1 个答案:

答案 0 :(得分:0)

我认为你可以尝试:

 var chart = new Highcharts.Chart({
......
}); 


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