[英]Google Charts - Responsive Issue - Dynamically Resize
我正在尝试使我的Google Column Material Chart响应,但它对我来说似乎有些不稳定,并且根本无法正常工作。 任何人都可以帮助我做好这个流程
只有在加载页面时,图表才会以该格式显示。 更改浏览器窗口宽度时,它不会动态调整大小。
JSFIDDLE https://jsfiddle.net/rbla/Le8g0sw0/8/
HTML
<div id="chart">
<div id="chart_div"></div>
</div>
CSS
#chart {
border:5px solid #AAA;
width: 80%;
min-height: 450px;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
// REFLOW
$(window).resize(function(){
drawChart();
});
在小提琴中,你正在使用JQuery来监听窗口调整大小...
$(window).resize(function(){
drawChart();
});
但是,JQuery不包括在内......
改为使用addEventListener
,或者包含对JQuery的引用,
请参阅以下工作代码段...
google.charts.load('current', { packages: ['bar'] }).then(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'vertical', vAxis: {format: 'decimal'}, height: 400, colors: ['#1b9e77', '#d95f02', '#7570b3'] }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); window.addEventListener('resize', drawChart, false); }
#chart { border: 5px solid #AAA; min-height: 450px; }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart"> <div id="chart_div"></div> </div>
像这个例子一样,将宽度从80%更改为100%:
#chart {
border: 5px solid #AAA;
width: 100%;
min-height: 450px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.