私はこれを持っています 私のウェブサイト上のグーグルチャート 。現時点では散布図ですが、あらゆる種類のチャートの解決策が欲しいです。たとえば、700ピクセル幅のウィンドウでサイトをロードすると、チャートの寸法が反応しなくなります。チャートが広すぎます。以下は私が使用しているコードです。
HTML:
<div id="chart_div"></div>
CSS:
#chart_div {
width:100%;
height:20%;
}
JS:
var options = {
title: 'Weight of pro surfer vs. Volume of his pro model',
hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55
vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40}, //20
legend: 'none',
width: '100%',
height: '100%',
colors: ['#000000'],
series: {
1: { color: '#06b4c8' },
},
legend: {position: 'top right', textStyle: {fontSize: 8}},
chartArea: {width: '60%'},
trendlines: { 0: {//type: 'exponential',
visibleInLegend: true,
color: 'grey',
lineWidth: 2,
opacity: 0.2,
labelInLegend: 'Linear trendline\n(Performance)'
}
} // Draw a trendline for data series 0.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'ready', myReadyHandler());
function myReadyHandler() {
chartDrawn.resolve(); }
編集:div #chart_div
は正しいサイズ(cssで設定したサイズ)ですが、このdiv内のグラフはそのサイズを適応しません...
Visualization APIチャートはまったく反応しないため、すべてを自分で処理する必要があります。通常、これはウィンドウの「サイズ変更」イベントをリッスンし、チャートを再描画することを意味します(必要に応じて寸法を設定します)。
function resize () {
// change dimensions if necessary
chart.draw(data, options);
}
if (window.addEventListener) {
window.addEventListener('resize', resize);
}
else {
window.attachEvent('onresize', resize);
}
私にとっては、上記のどれもうまくいかなかったか、試してみるには複雑すぎました。
私が見つけた解決策はシンプルで、完璧に機能します。通常のGoogleグラフ、私の場合はドーナツグラフを作成し、CSSを使用してスタイルを設定するだけです。
@media screen and (max-width: 1080px) {
div#donutchart {
zoom:0.6;
margin-left:-16%;
}
}
それで全部です。もちろん、最大幅、ズーム、マージンに他の値を設定して、チャートを完全に合わせることができます。私のグラフは800x600です( ここで確認できます )。
チャートの幅100%を入力し、以下のようにサイズ変更関数を呼び出します
$(window).resize(function(){
yourCallingChartFunction();
});
レスポンシブロードの場合:
#chart_div {
width:inherit;
height:inherit;
}
ただし、セッション中に画面サイズが変更されると機能しません。
Twitter Bootstrapを使用している場合、v3.2以降ではembed-responsive
スタイル:
<div class="embed-responsive embed-responsive-16by9">
<div id="chart_div" class="embed-responsive-item"></div>
</div>
または、4:3のアスペクト比が必要な場合:
<div class="embed-responsive embed-responsive-4by3">
<div id="chart_div" class="embed-responsive-item"></div>
</div>
最善の解決策は、ウィンドウのサイズを変更してチャートビューを変更することです。
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Value');
data.addColumn('number', 'Sites');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['valueA', 57, 'Value A is 57', 'stroke-color: #000; stroke-width: 1'],
['valueB', 19, 'Value B is 19', 'stroke-color: #000; stroke-width: 1'],
['valueC', 25, 'Value C is 25', 'stroke-color: #000; stroke-width: 1']
]);
var options = {
colors: ['#fff2af'],
hAxis: {textPosition: 'none',textStyle:{color:'#fff'}},
vAxis: {gridlines: {color: '#fff'},textStyle:{color:'#fff'}},
legend: {position: 'none'},
backgroundColor: '#aadaff'
};
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, options);
$(window).resize(function(){
var view = new google.visualization.DataView(data);
chart.draw(view, options);
})
}
より効率的なサイズ変更スニペットは以下にあり、再利用可能です。
//bind a resizing function to the window
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//usage of resizeEnd
$(window).bind('resizeEnd', function() {
DoSomething();
});
チャートJSで「幅」プロパティを設定しないでください。これにより、ロード時に幅が自動的に設定されます。
いくつかのコード:
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {
title: "Density of Precious Metals, in g/cm^3",
height: 400
//width: 1100, <--- DON'T SET THIS OPTION, it will be set automatically depending on the size of the container div
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!--Div that will hold the pie chart-->
<div id="chart_div" class="mt-3" style="height: 400px; width: 100%; border: 1px solid #CCCCCC"></div>