本文介绍了使用highcharts调整gridster.js的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我调整gridster窗口部件的大小时，gridster窗口部件内部的Highcharts不会自动调整大小。当我调整窗口大小时，根据网格大小调整大小。但它应该会自动调整格子大小。我试过的代码如下：
< HTML>< HEAD>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< title> GridSter With HighChart< / title>
< link rel =stylesheettype =text / csshref =http://gridster.net/dist/jquery.gridster.css>
< link rel =stylesheettype =text / csshref =http://gridster.net/demos/assets/demo.css>
< body>
< div class =controls>
< button class =js-resize-random>调整随机小部件的大小< / button>
< / div>
< div class =gridster ready>
< ul style =height：520px; width：550px; position：relative;>
< li class =gs -wdata-row =1data-col =1data-sizex =2data-sizey =4>
< div id =containerstyle =width：100％; margin：0 auto>< / div>
< span class =gs-resize-handle gs-resize-handle-both>< / span>< / li>
< / ul>
< / div>
< script type =text / javascriptsrc =http://gridster.net/demos/assets/jquery.js>< / script>
< script src =http://gridster.net/dist/jquery.gridster.jstype =text / javascriptcharset =utf-8>< / script>
< script src =http://code.highcharts.com/highcharts.js>< / script>
< script src =http://code.highcharts.com/modules/exporting.js>< / script>
< script type =text / javascript>
function getRandomInt（min，max）{
return Math.floor（Math.random（）*（max - min + 1））+ min;
}
< / script>
< script type =text / javascript>
var gridster;
$（function（）{
gridster = $（。gridster ul）。gridster（{
widget_base_dimensions：[100，55]，
widget_margins：[5，5]，
helper：'clone'，
resize：{
enabled：true
}
}）。data（'gridster '）;
$（'。js-resize-random'）。on（'click'，function（）{
gridster.resize_widget（gridster。$ widgets。 eq（getRandomInt（0，9）），
getRandomInt（1，4），getRandomInt（1，4））
}）;
}）;
< / script>
< script>
$函数（）{
图表= $（'＃container'）。highcharts（{
图表：{
plotBackgroundColor：null，
plotBorderWidth：null，
plotShadow：false
}，
title：{
text：'2010年特定网站的浏览器市场份额'
}，
tooltip：{
pointFormat：'{series.name}：< b> {point.percentage：.1f}％< / b>'
}，
plotOptions：{
pie ：{
allowPointSelect：true，
cursor：'pointer'，
dataLabels：{
enabled：true，
color：'＃000000'，
connectorColor：'＃000000'，
格式：'< b> {point.name}< / b>：{point.percentage：.1f}％'
}
}
}，
系列：[{
ty pe：'pie'，
name：'Browser share'，
data：[
['Firefox'，45.0]，
['IE'，26.8]，
{
name：'Chrome'，
y：12.8，
sliced：true，
selected：true
}，
['Safari'， 8.5]，
['Opera'，6.2]，
['Others'，0.7]
]
}]
}）;
}）;
< / script>
< / body>< / html>
解决方案
根据，自动回流只发生在 window.resize 事件上。你必须明确地做到这一点。我只是在gridster的 resize.stop 。
Highcharts inside the gridster widgets not resize automatically when I resize the gridster widgets. When I resize the window, highchart are resized based on the grid sizes. But it should happen automatically when I resize the grid.
Code I tried is below :
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>GridSter With HighChart</title>
<link rel="stylesheet" type="text/css" href="http://gridster.net/dist/jquery.gridster.css">
<link rel="stylesheet" type="text/css" href="http://gridster.net/demos/assets/demo.css">
<body>
<div class="controls">
<button class="js-resize-random">Resize random widget</button>
</div>
<div class="gridster ready">
<ul style="height: 520px; width: 550px; position: relative;">
<li class="gs-w" data-row="1" data-col="1" data-sizex="2" data-sizey="4">
<div id="container" style="width:100%;margin: 0 auto"></div>
<span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li class="gs-w" data-row="1" data-col="3" data-sizex="1" data-sizey="2">1<span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li class="gs-w" data-row="1" data-col="4" data-sizex="1" data-sizey="1">2<span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li class="gs-w" data-row="3" data-col="2" data-sizex="3" data-sizey="1">3<span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li class="gs-w" data-row="1" data-col="5" data-sizex="1" data-sizey="3">9<span class="gs-resize-handle gs-resize-handle-both"></span></li>
</ul>
</div>
<script type="text/javascript" src="http://gridster.net/demos/assets/jquery.js"></script>
<script src="http://gridster.net/dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
<script type="text/javascript">
var gridster;
$(function(){
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');
$('.js-resize-random').on('click', function() {
gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
getRandomInt(1, 4), getRandomInt(1, 4))
});
});
</script>
<script>
$(function () {
chart = $('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
</script>
</body></html>
解决方案
According to the Highcharts api, automatic reflow only occurs on window.resize events. You'll have to do this explicitly. I'd simply do it in gridster's resize.stop callback:
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true,
stop: function(e, ui, $widget) {
Highcharts.charts[0].reflow(); // reflow the first chart...
}
}
}).data('gridster');
Example fiddle here.
这篇关于使用highcharts调整gridster.js的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！