Столбчатая диаграмма Highcharts переполняет область графика

Проблема заключается в следующем:

Если у меня очень малонаселенная ось даты и времени x с типом столбчатой ​​диаграммы, то некоторые столбцы обрезаются.

Вот пример скрипта: http://jsfiddle.net/qzqnX/

В этом примере у меня есть два столбца, и столбец на крайних концах обрезается.

Если я увеличу данные до 3 столбцов, одна из серий будет полностью скрыта.

Вот пример скрипки: http://jsfiddle.net/GrKKt/

Я хотел бы, чтобы столбцы отображались в области графика, а не частично вырезались или скрывались. Также было бы неплохо, если бы они отрисовывались с некоторым запасом от краев области сюжета. Спасибо.


javascript highcharts
person Mr.Hunt    schedule 17.10.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я нашел два решения проблемы выше:

Первое решение, указанное в первом ответе, — добавить нули. Я обнаружил, что добавление двух нулей оптимально и работает нормально. Даже если у вас много серий в ваших данных.

Пример: http://jsfiddle.net/vwzeP/

Второе решение — добавить minPadding, maxPadding к оси x. Также нет необходимости добавлять нули к вашему вводу. Но поведение highcharts немного непоследовательно в отношении заполнения. Поэтому вам нужно применять разные значения для свойств min/maxPadding. Если у вас есть более 6 точек на оси X даты и времени, ширина столбца автоматически соответствует области графика, и вы можете установить для minPadding/maxPadding значение по умолчанию 0,01.

хорошие значения заполнения следующие:

switch (numberOfPointsInDataArray) {
        case 1:
        case 2:
            padding = 0.25;
            break;
        case 3:
            padding = 0.13;
            break;
        case 4:
            padding = 0.075;
            break;
        case 5:
            padding = 0.05;
            break;
        case 6:
            padding = 0.03;
            break;
    }

Пример заполнения двумя точками в массиве данных: http://jsfiddle.net/J7zsk/

надеюсь, это поможет другим.

person Mr.Hunt    schedule 21.10.2011

arrow_upward
2
arrow_downward

Ширина столбцов обрабатывается не очень хорошо, когда используется ось даты и времени, лучший способ обойти это — ввести нулевые значения для промежуточных дат. Вот так:

chart: {
    renderTo: 'container',
    type: 'column'
},

xAxis: {
    type: 'datetime'
},

series: [{
    data: [29.9, null, null, null, null, null, 71.5],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 1 * 24 * 3600 * 1000 // one day
    },
{
    data: [29.9, null, null, null, null, null, 71.5],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 1 * 24 * 3600 * 1000 // one day
    }]

В этом случае расчетная ширина будет равномерно распределена между 7 днями. Пример на jsfiddle.

введите здесь описание изображения

person eolsson    schedule 18.10.2011