highchart 之放大显示的几种方式

可能大家对highchart的api不是很熟，分享几个higchart 放大化显示的几种方法，对api熟悉可以忽略本篇文章了。

第一种方式 通过设置渲染DIV的宽带来调整图表的大小

var chart=new Highcharts.Chart(option); //假设这是我们初始化的图表
$('#container').width(500);//这里重新设置container这个DIV的宽度
//接着我们调用chart对象的reflow()方法即可重新渲染图表的大小
chart.reflow();

在新窗口中打开查看例子：点击查看DEMO

第二种方式 通过弹出模态窗口的模式放大化

//核心方法
$('.chart-container').bind('mousedown', function () {
    $(this).toggleClass('modal');
    $('.chart', this).highcharts().reflow();
});

在新窗口中打开查看例子：点击查看DEMO

第三种方式 通过chart本身api的setSize方法动态改变大小

var chart=new Highcharts.Chart(option);
chart.setSize(chartWidth, chartHeight);

在新窗口中打开查看例子：点击查看DEMO