我想知道是否有人成功實施了使用Highcharts的自適應設計，使他們的圖表在移動和桌面上都看起來不錯。使Highcharts.js圖表在移動和桌面上看起來不錯
默認情況下，當您調整瀏覽器屏幕的大小時，Highcharts會進行重新縮放，只是X軸由刻度標記文本和條形圖看起來很高並且太瘦（太壓縮）而混亂。 要了解我的意思，你可以去this page並調整瀏覽器大小。
我認爲這些問題可能通過減少數據點的數量說原始數量的三分之一，雖然我想知道如何以編程方式使用Highcharts的API來完成。如果這聽起來不是一個好主意，我也對其他想法或解決方案感興趣，他們可能會想出在移動設備上使用Highcharts（或者甚至可能是不同的JS圖表庫，其中多設備解決方案可能更容易實現？）。
該解決方案看起來相當簡單。
只是不給圖表的固定寬度，即不定義寬度或設置width:100%，而且，與我提到的演示不同，條形圖寬度和伴隨的條形會縮小，與瀏覽器寬度一樣多降低。
爲什麼這個答案downvoted？ – 2013-08-16 12:28:42
這可能取決於您顯示的圖表類型。在移動設備上，如果您顯示的是柱狀圖，則可能需要旋轉圖表以使其成爲條形圖。
如果您顯示折線圖，則可以「對數據進行」範圍確定，以便僅顯示獲取點所需的最少點數。在放大時，重新確定數據的範圍以適應當前視圖。這可以通過使用一些事件與一些手動js結合來完成。
它不太可能是一個解決方案，事實上這是一個重點。你必須告訴計算機@TimPeterson你想做什麼，不要讓它只爲你猜。 – jcolebrand 2012-07-12 19:56:02
爲例與自舉
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Highcharts data from JSON Response</title>
<style>
body{
margin-top: 30px;
margin-left:40px;
}
.col-md-4{
padding-left:5px !important;
padding-right:5px !important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
$(document).ready(function() {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function() {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function() {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
Highcharts.chart('container3', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function() {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
})
</script>
</head>
<body>
<div class="col-md-12 row">
<div class="col-md-4">
hello
</div>
<div class="col-md-8 row">
<div class="col-md-4"><div id="container" style="height: 400px;border:1px solid;"></div></div> <div class="col-md-4"><div id="container2" style="height: 400px;border:1px solid;"></div></div>
<div class="col-md-4"><div id="container3" style="height: 400px;border:1px solid;"></div></div>
</div>
</div>
</body>
</html>
可以設定圖表div容器width:100%。 然後，只需刪除高圖寬度屬性。我解決它爲一個sparkline圖表。現在它是移動響應。
Highcharts.chart('my-sparkline-chart, {
chart: {
type: 'areaspline',
height: '70',
//width: '189', //comment width property.
spacing: [0, 0, 0, 0],
backgroundColor: "transparent"
}
...
參考這一點，看看是否有幫助 - http://jsfiddle.net/Behseini/qheh4w0n/ – 2016-04-06 07:36:50