ウィンドウのサイズが変更されるまでレスポンシブハイチャートのサイズが正しく設定されない
私は、クラスプロジェクトにZurbのFoundationフレームワーク内でHighchartsを使用しています。セクションタブ内に3つのグラフがあります。 1つは12列のdiv内にあり、他の2つは6列のdiv内の同じ行にあります。
ページがロードされると、機能のあるチャートは12列の使用可能な幅を占有せず、2つの小さいチャートは6列をオーバーフローします。ただし、ウィンドウのサイズを変更するか、Inspect要素を使用して調査しようとすると、チャートはすぐに正しいサイズにスナップします。この動作は、Chrome、FF、およびIEで発生します。
特定の幅を設定できることはわかっていますが、Foundationを活用して応答性を維持したいのです。
CSSとHighchartsの初期化を微調整しましたが、困惑しています。他の誰かがこの問題を経験しましたか？誰も私が見逃しているものを見ることができますか？
これが私のHTMLからの抜粋です。
<div class="row">
<div class="twelve columns">
<!--begin tabs below-->
<div class="section-container tabs" data-section="tabs">
<section>
<p class="title" data-section-title><a href="#">Heart Disease</a></p>
<div class="content" data-section-content id="heart">
<div class="row feature-chart">
<div class="large-12 columns">
<div id="heartTimeline-container">
<div id="heartTimeline"></div>
</div>
</div> <!--close 12 columns-->
</div> <!--close row-->
<div class="row small-charts">
<div class="large-6 columns">
<div id="heartDemo"></div>
</div>
<!--close 6-->
<div class="large-6 columns">
<div id="heartStages"></div>
</div>
<!--close 6-->
</div>
<!--end row-->
</div>
</section>
</div>
</div>
<!--end twelve columns-->
Highcharts jsは次のとおりです。
$(function () {
Highcharts.setOptions({
colors: ['#1A1A1A', '#455D78', '#BDCCD4', '#999999', '#B3B3B3', '#F2F2F2']
});
$('#heartTimeline').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Heart Disease Death Rates in the U.S.from 1980-2010'
},
subtitle: {
text: 'Source: <a href="http://www.mdch.state.mi.us/pha/osr/deaths/Heartdx.asp">'+
'Michigan Department of Community Health</a>'
},
xAxis: {
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Heart Disease Death Rate Per 100,000 People'
},
labels: {
formatter: function() {
return this.value / 1 +'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>deaths per hundred thousand people in {point.x}'
},
plotOptions: {
area: {
pointStart: 1980,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Heart Disease',
data: [412.1, 397, 389, 388, 378, 375, 365.1, 355.9, 352.5, 332, 321.8, 313.8, 306.1, 309.9, 299.7, 296.3, 288.3, 280.4, 272.4, 267.8, 257.9, 247.8, 240.8, 232.3, 217, 211.1, 200.2, 190.9, 186.5, 180.1, 178.5]
}, ]
});
});
$(function () {
$('#heartDemo').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Most Prevelant Causes and Effects of Heart Disease 2013'
},
subtitle: {
text: 'Source: http://circ.ahajournals.org (The American Heart Association)'
},
xAxis: [{
categories: ['Smoking', 'Obesity (BMI > 25 kg) ', 'Total cholesterol > 200 mg)', 'High Blood Pressure', 'Diabetes Mellitus', 'Prediabetes', 'Total Cardiovascular Disease', 'Stroke', 'Coronary Heart Disease', 'Heart Failure'],
labels: {
rotation: -90,
align:'right'
}
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'%';
},
style: {
color: '#000000'
}
},
title: {
text: 'Men',
style: {
color: '#BDCCD4'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Both Sexes',
style: {
color: '#455D78'
}
},
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Women',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Both Sexes',
color: '#455D78',
type: 'column',
yAxis: 1,
data: [19, 68.2, 43.4, 33, 8.3, 38.2, 35.3, 2.8, 6.4, 2.1],
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Women',
type: 'spline',
color: '#AA4643',
yAxis: 2,
data: [16.7, 63.7, 44.9, 32.2, 7.9, 30.5, 34, 3, 5.1, 1.8],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Men',
color: '#BDCCD4',
type: 'spline',
data: [21.3, 72.9, 41.3, 33.6, 8.7, 46, 36.7, 2.6, 7.9, 2.5],
tooltip: {
valueSuffix: ' %'
}
}]
});
});
$(function () {
$('#heartStages').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Number of Deaths for Different Types of Heart Diseases in the U.S. for 2008'
},
subtitle: {
text: 'Source: <a href="http://www.nhlbi.nih.gov/resources/docs/2012_ChartBook_508.pdf">'+
'Morbitity & Mortality: 2012 Chart Book on Cardiovascular, Lung and Blood Disease</a>'
},
xAxis: {
categories: [
'Coronary Heart Disease',
'Heart Attack',
'Cardiomyopathy',
'Stroke',
'Atrial Fibrillation and Flutter',
'Heart Failure',
'Diseases of Pulmonary Circulation',
'Pulmonary Embolism',
],
labels: {
rotation: -90,
align:'right'
}
},
yAxis: {
min: 0,
title: {
text: 'Heart Disease Diagnostic Category (thousands)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Heart Disease Related Deaths for 2008',
data: [405.309, 133.958, 23.932, 134.148, 15.383, 56.830, 12.927, 7.158]
}]
});
});
私は別の答えからこれを得たので、thegreyspotにいくつかのクレジットを与えてください この質問では 。
解決策：グラフが読み込まれた後（またはデータを入力したとき）$(window).resize();を呼び出します
chart.reflow()関数を使用するだけです
レスポンシブハイチャートでこれらの例をご覧ください。
http://jsbin.com/anuqav/1/edit
http://jsfiddle.net/2gtpA/show/
<div id="container" style="width:100%;margin: 0 auto"></div>
これは役立つかもしれません：
$(Highcharts.charts).each(function(i,chart){
var height = chart.renderTo.clientHeight;
var width = chart.renderTo.clientWidth;
chart.setSize(width, height);
});
イベントリスナを追加して、グラフを再描画するたびにサイズを変更できます。
mychart = new Highcharts.stockChart('div', {
chart: {
events: {
redraw: function(e) {
mychart.reflow();
}
}
},
私にとっては、少し時間がかかり、ウィンドウのサイズ変更をトリガーする必要がありました。
window.setTimeout(function(){ $(window).trigger('resize'); }, 500);
このコードを例に使用できます
var chart;
$(function() {
var newh = $("#container").height();
$( window ).resize(function() {
newh = $("#container").height();
chart.redraw();
chart.reflow();
});
chart = new Highcharts.Chart();
})
別のソリューションを追加したいだけです。
$('.chart').highcharts(options, function(chart) {
setTimeout(function() {
chart.reflow();
});
});
グラフがレンダリングされた後、次のフレームでチャートをリフローします。
ちょっと古いトピックですが、IE8でこの問題が発生しました。 IEの現在のバージョンはこれを書いている時点ではIE10ですが、以前のバージョンと互換性のあるサイトにする必要がありました。私はsettimeoutに加えてリサイズを行い、IE8で実行しましたが、これが数時間ソリューションを見つけようとした私のような誰かに役立つことを願っています。
scriptセクションだけが必要なセクションである場合があります。
<!--[if IE 8]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script>
function timeout() {
$(window).resize();
}
window.setTimeout(function() {
timeout();
},2000);
</script>
<style>
.highcharts-container{width:100% !important; height:100% !important;}
</style>
<![endif]-->
これだけが私のために働いた
$(window).resize(function(){
$scope.chartConfig.getChartObj().reflow()
});
純粋なjavascriptでは、window.onresizeを使用した単一ページの複数のチャート
window.onresize = function() {
//- Remove empty charts if you are using multiple charts in single page
Highcharts.charts = Highcharts.charts.filter(function(chart){
return chart !== undefined;
});
Highcharts.charts.forEach(function(chart) {
var height = chart.renderTo.chartHeight;
//- If you want to preserve the actual height and only want to update
//- the width.
//- var height = chart.chartHeight;
var width = chart.renderTo.clientWidth;
//- The third args is an animation set to true.
chart.setSize(width, height, true);
});
};