Как обновить содержимое div (или какую функцию вызвать)?
Использую библиотеку highstock.js
Есть div который разворачивается на весь экран. Но его содержимое (график) нет. Удобнее смотреть наверно тут http://jsfiddle.net/8hhwpo8s/4/ Нажимаем на ссылку справа вверху - div меняет размер, а график нет. Далее изменяем размер окна и график поменял размер - точно под размер дива. Как обновить содержимое div (или какую функцию вызвать), для того чтобы график автоматически менял размер при изменении размера дива? Проще говоря - нажали на ссылку - "На весь экран" и div и график стали на весь экран. Вот весь код, как требуют правила форума. body { padding: 0; margin:0px; } .container_resize_div { z-index:1; position:absolute; top:10px; right:10px; } .container_resize_link { color:#000000; } #container { background:red; box-sizing: border-box; border: 1px solid black; } <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script> <div class="container_resize_div"> <a href="#" id="container_resize_link" class="container_resize_link">На весь экран</a> </div> <div id="container" style="height: 400px; min-width: 310px"></div> $(document).ready(function(){ $("#container_resize_link").click(function(){ $("#container").animate({ width: '100vw',height: '100vh' }); }); }); $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) { // split the data set into ohlc and volume var ohlc = [], volume = [], dataLength = data.length, // set the allowed units for data grouping groupingUnits = [[ 'week', // unit name [1] // allowed multiples ], [ 'month', [1, 2, 3, 4, 6] ]], i = 0; for (i; i < dataLength; i += 1) { ohlc.push([ data[i][0], // the date data[i][1], // open data[i][2], // high data[i][3], // low data[i][4] // close ]); volume.push([ data[i][0], // the date data[i][5] // the volume ]); } // create the chart Highcharts.stockChart('container', { rangeSelector: { selected: 1 }, title: { text: 'AAPL Historical' }, yAxis: [{ labels: { align: 'right', x: -3 }, title: { text: 'OHLC' }, height: '60%', lineWidth: 2, resize: { enabled: true } }, { labels: { align: 'right', x: -3 }, title: { text: 'Volume' }, top: '65%', height: '35%', offset: 0, lineWidth: 2 }], tooltip: { split: true }, series: [{ type: 'candlestick', name: 'AAPL', data: ohlc, dataGrouping: { units: groupingUnits } }, { type: 'column', name: 'Volume', data: volume, yAxis: 1, dataGrouping: { units: groupingUnits } }] }); }); |
<head> <style> body { padding: 0; margin:0px; } .container_resize_div { z-index:1; position:absolute; top:10px; right:10px; } .container_resize_link { color:#000000; } #container { background:red; box-sizing: border-box; border: 1px solid black; } </style> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script> <script> $(document).ready(function(){ $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) { // split the data set into ohlc and volume var ohlc = [], volume = [], dataLength = data.length, // set the allowed units for data grouping groupingUnits = [[ 'week', // unit name [1] // allowed multiples ], [ 'month', [1, 2, 3, 4, 6] ]], i = 0; for (i; i < dataLength; i += 1) { ohlc.push([ data[i][0], // the date data[i][1], // open data[i][2], // high data[i][3], // low data[i][4] // close ]); volume.push([ data[i][0], // the date data[i][5] // the volume ]); } // create the chart var chrt = new Highcharts.stockChart('container', { rangeSelector: { selected: 1 }, title: { text: 'AAPL Historical' }, yAxis: [{ labels: { align: 'right', x: -3 }, title: { text: 'OHLC' }, height: '60%', lineWidth: 2, resize: { enabled: true } }, { labels: { align: 'right', x: -3 }, title: { text: 'Volume' }, top: '65%', height: '35%', offset: 0, lineWidth: 2 }], tooltip: { split: true }, series: [{ type: 'candlestick', name: 'AAPL', data: ohlc, dataGrouping: { units: groupingUnits } }, { type: 'column', name: 'Volume', data: volume, yAxis: 1, dataGrouping: { units: groupingUnits } }] }); $("#container_resize_link").click(function(){ $("#container").animate({ width: '100vw',height: '100vh' }, function() { chrt.reflow();}); }); }); }); </script> </head> </body> <div class="container_resize_div"> <a href="#" id="container_resize_link" class="container_resize_link">На весь экран</a> </div> <div id="container" style="height: 400px; min-width: 310px"></div> </body> |
Спасибо, работает.
Правда график заполняет див как то резко (див увеличивается плавно - а потом график резко заполняет див). Но наверно по другому нельзя т.к. за это отвечает функция reflow, которую писали программисты highcharts. Но главное работает. |
unity555,
Цитата:
|
Часовой пояс GMT +3, время: 13:31. |