Graphique à colonnes avec emplacement fixe
Voici un exemple de graphique à colonnes avec un placement fixe.
Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Voyons maintenant les configurations supplémentaires et aussi comment nous avons ajoutépointPlacement et pointPadding sous série.
Un exemple de diagramme à colonnes avec un placement fixe est donné ci-dessous.
series.pointPadding
Remplissage entre chaque colonne ou barre, en unités de l'axe x; la valeur par défaut est 0,1.
series.pointPlacement
Dans un histogramme, lorsque pointPlacement est "on", le point ne créera aucun remplissage de l'axe X. Dans un histogramme polaire, cela signifie que la première colonne pointe directement vers le nord. Si le pointPlacement est "between", les colonnes seront disposées entre les graduations. Cela peut être utile pour visualiser une quantité entre deux points dans le temps ou dans un certain secteur d'une carte polaire.
Depuis Highcharts 3.0.2, le placement du point peut également être numérique, où 0 est la valeur de l'axe, -0,5 est entre cette valeur et la précédente et 0,5 entre cette valeur et la suivante. Contrairement aux options textuelles, les options de placement de points numériques n'affecteront pas le remplissage de l'axe.
series: {
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}Exemple
highcharts_column_fixed.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: 'Efficiency Optimization by Branch'
};
var xAxis = {
categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
};
var yAxis = [
{
min: 0,
title: {
text: 'Employees'
}
},
{
title: {
text: 'Profit (millions)'
},
opposite: true
}
];
var legend = {
shadow: false
};
var tooltip = {
shared: true
};
var credits = {
enabled: false
};
var plotOptions = {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
};
var series = [
{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
},
{
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2
},
{
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
},
{
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}
];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.credits = credits;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.