HighCharts: échelle logarithmique pour les graphiques à barres horizontaux

Question

Je travaille avec Hauts-pares pour produire un graphique à barres. Mes valeurs peuvent aller de 0 aussi minimale à aussi élevé que 100K (exemple). Par conséquent, une barre du graphique peut être très petite et l'autre peut être très longue. HighCharts a introduit la caractéristique de la "mise à l'échelle logarithmique". Dont l'exemple peut être vu ICI

Mon code JS est écrit dans ce jsfiddle dossier. Je veux afficher mon axe horizontal (axe x) logarithmiquement. J'ai inséré la clé taper Comme le montre l'exemple, mais le script va dans une boucle infinie qui doit être arrêtée.

Qu'est-ce que la faille dans l'exécution ou la mise à l'échelle logarithmique pour les hauts-cartes n'est-elle toujours pas mûre?

Ps La ligne commentée dans JSFiddle cause le problème

Answer 1

Il est toujours expérimental selon le Documentation officielle, donc cela pourrait être le cas:

"Le type d'axe. Peut être l'un des" linéaires "ou" DateTime ". Dans un axe DateTime, les nombres sont donnés en millisecondes et les marques de tiques sont placées sur des valeurs appropriées comme les heures complètes ou les jours.

À partir de 2.1.6, "logarithmique" est ajouté en tant que fonctionnalité expérimentale, mais elle n'est pas encore entièrement mise en œuvre. Par défaut "linéaire".

Essayez-le: "linéaire", "datetime" avec des intervalles réguliers, "DateTime" avec des intervalles irréguliers, "Axe logarithmique" logarithmique expérimental.

Answer 2

Étant donné que la méthode "officielle" est toujours buggy, vous pouvez atteindre l'échelle du journal plus manuellement en manipulant vos données d'entrée avec un journal de base 10 et en masquant vos données de sortie augmentant 10 vers la valeur de sortie. Voyez-le en action ici http://jsfiddle.net/7j6sc/ Code ci-dessous.

function log10(n) {
 return Math.log(n)/Math.log(10);   
}

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar',
        marginRight: 200,
        marginLeft: 10,
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: [''],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high',
        },
        labels: {
            formatter: function() {
             return Math.round(Math.pow(10,this.value));
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -50,
        y: 100,
        floating: true,
        borderWidth: 1,
        shadow: true
    },
    tooltip: {
        formatter: function() {
            return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                   return Math.round(Math.pow(10,this.y)); 
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [log10(4396)],
        "name": "A"},
    {
        "data": [log10(4940)],
        "name": "B"},
    {
        "data": [log10(4440)],
        "name": "C"},
    {
        "data": [log10(2700)],
        "name": "D"},
    {
        "data": [log10(2400)],
        "name": "E"},
    {
        "data": [log10(6000)],
        "name": "F"},
    {
        "data": [log10(3000)],
        "name": "G"},
    {
        "data": [log10(15000)],
        "name": "E"}],

});

Answer 3

Pour ceux d'entre vous qui recherchent toujours une réponse:

Jsfiddle: http://jsfiddle.net/tukwt/76/

Snippet ou plus:

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: ['A','B','C','D','E','F','G','H'],
        title: {
            text: null
        }
    },
    yAxis: {
        type: 'logarithmic',
        //min: 0, <= THIS WILL CAUSE ISSUE 
        title: {
            text: null,
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return this.x + ':' + this.y + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: false
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [4396,4940,4440,2700,2400,6000,3000,15000],
        }],

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px"></div>