HighCharts: логарифмическая шкала для горизонтальных гистограмм

Question

Я работаю с HighCharts , чтобы создать гистограмму.Мои значения могут варьироваться от минимально 0 до 100к (пример).Поэтому один столбец графика может быть очень маленьким, а другой - очень длинным.HighCharts представила функцию «Логарифмическое масштабирование».Пример, который можно увидеть ЗДЕСЬ

Мой код js записан в этом файле jsfiddle .Я хочу отображать мою горизонтальную ось (ось X) логарифмически.Я вставил ключ type , как показано в примере, но скрипт переходит в бесконечный цикл, который должен быть остановлен.

Какой недостаток в выполнении или логарифмическое масштабирование для HighCharts все еще не достигнуто?

PS Закомментированная строка в jsfiddle вызывает проблему

Answer 1

Поскольку «официальный» метод все еще содержит ошибки, вы можете увеличить масштаб записи вручную, манипулируя своими входными данными с помощью журнала 10 и маскируя свои выходные данные, увеличивая 10 до выходного значения.Смотрите это в действии здесь http://jsfiddle.net/7J6sc/ код ниже.

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 2

Для тех из вас, кто все еще ищет ответ:

JSFiddle: http://jsfiddle.net/TuKWT/76/

Или ТАК фрагмент:

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>

Answer 3

В соответствии с Официальной документацией она все еще является экспериментальной, так что это может иметь место:

"Тип оси. Может быть" линейной "или" датой-временем ".На оси дата-время числа даны в миллисекундах, а отметки отмечены соответствующими значениями, такими как полные часы или дни.

По состоянию на 2.1.6 "логарифмическая" добавляется какэкспериментальная функция, но она еще не полностью реализована. По умолчанию используется значение «linear».

Попробуйте: «linear», «datetime» с регулярными интервалами, «datetime» с нерегулярными, экспериментальная «логарифмическая» ось. "