Highcharts - Graphique de l'axe logarithmique
Voici un exemple de graphique logarithmique.
Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts . Maintenant, laissez-nous discuter d'un exemple de graphique logarithmique.
Configurations
Configurez le yAxis.type pour qu'il soit «logarithmique». Il définit le type d'axe. Les options sont "linéaire", "logarithmique", "datetime" ou "catégorie". Ici, la valeur par défaut est linéaire.
yAxis
var yAxis = {
type: 'logarithmic',
minorTickInterval: 0.1
};Exemple
highcharts_line_logarithmic.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 title = {
text: 'Logarithmic axis demo'
};
var xAxis = {
tickInterval: 1
};
var yAxis = {
type: 'logarithmic',
minorTickInterval: 0.1
};
var tooltip = {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'x = {point.x}, y = {point.y}'
};
var plotOptions = {
spline: {
marker: {
enabled: true
}
}
};
var series = [{
name: 'data',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}];
var json = {};
json.title = title;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.