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

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

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

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

P.S Строка с комментариями в jsfiddle вызывает проблему


person Zain Khan    schedule 25.01.2012    source источник
comment
Ваш запуск JS Fiddle меня вполне устраивает. Ошибка возникает только с оперативными данными?   -  person DivinesLight    schedule 25.01.2012
comment
Да, но посмотрите на закомментированную строку в нем //введите: 'логарифмический',, раскомментируйте и используйте   -  person Zain Khan    schedule 25.01.2012


Ответы (3)


Согласно официальной документации, он все еще находится на стадии эксперимента, так что может быть так:

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

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

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

person DivinesLight    schedule 25.01.2012
comment
да, я читал это, но все же в их дорожной карте это осень 2011 года. Хотя я бы согласился и пусть это будет сделано !!! - person Zain Khan; 25.01.2012
comment
Я бы предложил попробовать Google Charts API, так как сам перешел со всех этих раздутых API, таких как HighCharts и некоторых других, на Google и очень доволен. Это стабильно! - person DivinesLight; 25.01.2012

Поскольку «официальный» метод по-прежнему содержит ошибки, вы можете достичь логарифмической шкалы вручную, манипулируя своими входными данными с помощью журнала с основанием 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"}],

});
person Yanofsky    schedule 01.02.2012
comment
кажется довольно работоспособным решением, хотя есть недостатки? - person Zain Khan; 01.02.2012
comment
Самым большим недостатком является то, что вы не можете определить тики вашей оси как нелинейные. Это не позволяет вам использовать интервалы тиков, более детализированные, чем степени 10, без того, чтобы они казались странными. например галочки на 1, 3.16, 10, 31.6, 100, 316 - person Yanofsky; 01.02.2012
comment
Попробовал это, и это сработало как шарм. Это должен быть принятый ответ. - person Knak; 11.06.2015

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

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>

person Apolo    schedule 25.08.2015