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

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

Второе решение - добавить minPadding, maxPadding к xaxis.Нет необходимости добавлять нули к вашему входу.Но 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/

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

Answer 2

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

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 .

http://i55.tinypic.com/o5x451.png