Faire Highcharts.js les graphiques semblent bonnes sur mobile et desktop

Je me demandais si quelqu'un a avec succès mis en œuvre une conception réactive à l'aide de Highcharts pour rendre leurs cartes de bonne apparence sur les deux mobiles et de bureau.

Par défaut, Highcharts ne re-échelle lorsque vous redimensionnez l'écran du navigateur, c'est juste que l'axe des X obtenir encombré par le coche le texte et les graphiques à barres regarder grand et trop maigre (trop compressé).
Pour avoir une idée de ce que je veux dire, vous pouvez aller à cette page et redimensionner le navigateur.

Je pense que ces questions pourraient être abordées par la réduction de la quantité de points de données de dire à 1/3 du nombre original si je me demande comment cela serait accompli par programmation à l'aide de Highcharts de l'API. Si cela ne sonne pas comme une bonne idée, je suis également intéressé par d'autres pensées ou des solutions de gens ont peut-être venir avec utilisation de Highcharts sur le mobile (ou peut-être même les différents JS cartographie des bibliothèques où un multi-device solution serait peut-être plus facile à mettre en œuvre?).

<div id="chartcontainer" width='100%'></div> angulartutorial.blogspot.in/2014/03/responsive-highchart.html
Reportez-vous à cela et voir si cela aide - jsfiddle.net/Behseini/qheh4w0n

OriginalL'auteur tim peterson | 2012-07-12

18

La solution semble plutôt simple.

Il suffit de ne pas donner le graphe de largeur fixe, c'est à dire, de ne pas définir la largeur ou de l'ensemble width:100% et, contrairement à la démo, je l'ai mentionner, le graphique à barres de la largeur et de l'accompagnement des bars se réduira autant que la largeur du navigateur est réduite.

pourquoi cette réponse downvoted?

OriginalL'auteur tim peterson
4

Il dépend probablement sur les types de graphiques que vous affichez. Sur mobile, si vous affichez un graphique en colonnes, vous pouvez faire pivoter le graphique de sorte qu'il devient un graphique à barres.

Si vous affichez un graphique en ligne, vous pourriez "champ d'application" les données, de sorte que vous ne montrer que le minimum de points nécessaires pour obtenir le point à travers. Comme vous effectuez un zoom avant, re-champ d'application les données pour les adapter à la vue actuelle. Cela peut être fait à l'aide de certains événements combiné avec un roulé à la main de js.

Il n'est probablement pas une solution universelle est en effet le point. Vous allez avoir à dire à l'ordinateur ce que vous voulez faire @TimPeterson et de ne pas laisser deviner juste pour vous.

OriginalL'auteur Matthew Crist

Vous pouvez définir le graphique conteneur div width:100% .
Ensuite, il suffit de retirer le highchart largeur de la propriété. Je me suis décidé pour un graphique sparkline. Maintenant, il est mobile responsive.

Highcharts.chart('my-sparkline-chart, {
        chart: {
            type: 'areaspline',
            height: '70',
            //width: '189', //comment width property.
            spacing: [0, 0, 0, 0],
            backgroundColor: "transparent"
        }
...

OriginalL'auteur Asaprab

Un Exemple avec bootstrap

 <!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>

OriginalL'auteur ankush

essayez d'ajouter ce sur la <head></head>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

OriginalL'auteur leewi9

Vous devez vous connecter pour publier un commentaire.