Высокие диаграммы - выравнивание столбцов по линиям сетки при использовании временных меток серии

Question

Мне интересно, как выровнять столбцы на простой гистограмме высоких графиков при использовании меток времени в данных серии (простой способ форматирования дат).

При использовании свойства category для задания элементов оси x и двумерного массива целых чисел в качестве значений я получаю ожидаемый результат: столбцы совпадают с фоновой сеткой:

{
    series: [2,3,1,2,1,1,3,1],
    xAxis: {
        categories: [1540450800000, 1540537200000, 1540623600000, 1540710000000, 1540796400000, 1540882800000, 1540969200000, 1541055600000]
    }
}

полное перо https://codepen.io/adamglang/pen/GwRpaW?editors=1010

Однако, когда я теряю свойство category в пользу трехмерного массива для данных ряда с метками времени эпохи Unix для оси x и значений для оси y в каждом внутреннем массиве, я получаю диаграмму с правильными значениями но сетка не выравнивается по столбцам:

{
    series: [[1540450800000,2],[1540537200000,3],[1540623600000,1],[1540710000000,2],[1540796400000,1],[1540882800000,1],[1540969200000,3],[1541055600000,1]]
}

полное перо: https://codepen.io/adamglang/pen/GwRpaW?editors=1010

Я весь день копался в документах и ​​не вижу упоминаний об этом поведении. Я действительно хочу использовать второй метод с трехмерным массивом, чтобы не изменять модель данных. Кто-нибудь знает что-нибудь об этом?

Answer 1

График с xAxis.type = 'datetime' будет отображать каждый столбец в середине точки. В вашем случае в столбце представлены однодневные данные, поэтому для того, чтобы иметь подходящую сетку, вам нужно будет добавить точки в середине дня (12:00).

Код:

const data = [{
  "type": "column",
  "name": "Foo",
  "data": [2, 3, 1, 2, 1, 1, 3, 1],
  "canDeleteSeries": false,
  "colorByPoint": true,
  "colors": ["rgba(0,116,205,0.40)", "rgba(139,166,0,0.40)"]
}]

Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  time: {
    useUTC: true
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%B',
    },
    gridLineWidth: 1,
    crosshair: true,
  },
  yAxis: {
    gridLineWidth: 1
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointPadding: 0,
      groupPadding: 0,
    }
  },
  series: [{
    data: [
      [1540450800000 + 5 * 3600 * 1000, 2],
      [1540537200000 + 5 * 3600 * 1000, 3],
      [1540623600000 + 5 * 3600 * 1000, 1],
      [1540710000000 + 5 * 3600 * 1000, 2],
      [1540796400000 + 5 * 3600 * 1000, 1],
      [1540882800000 + 5 * 3600 * 1000, 1],
      [1540969200000 + 5 * 3600 * 1000, 3],
      [1541055600000 + 5 * 3600 * 1000, 1]
    ]
  }],
  credits: {
    enabled: false
  },
  borderWidth: 1,
});

Демо-версия: https://jsfiddle.net/wchmiel/5tychvd6/1/

Второй подход - это график с xAxis.type = 'category', как вы уже пробовали. Однако, чтобы использовать ту же структуру данных, вам нужно разделить данные и обновить диаграмму категориями и данными о сериях, когда происходит событие загрузки.

Код:

const data = [
  [1540450800000, 2],
  [1540537200000, 3],
  [1540623600000, 1],
  [1540710000000, 2],
  [1540796400000, 1],
  [1540882800000, 1],
  [1540969200000, 3],
  [1541055600000, 1]
];

Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function() {
        let chart = this,
          seriesData = [],
          categories = [],
          date;

        data.forEach(elem => {
          seriesData.push(elem[1]);
          date = Highcharts.dateFormat('%e. %b', elem[0]);
          categories.push(date);
        });

        chart.update({
          xAxis: {
            categories: categories
          },
          series: {
            data: seriesData
          }
        }, true, false, false);
      }
    }
  },
  xAxis: {
    categories: [],
    title: {
      text: 'xAxis'
    },
    type: 'category',
    dateTimeLabelFormats: {
      month: '%B',
    },
    gridLineWidth: 1,
    crosshair: true,
  },
  yAxis: {
    title: {
      text: 'yAxis'
    },
    gridLineWidth: 1,
  },
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom',
    useHTML: true,
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointPadding: 0,
      groupPadding: 0,
    },
    line: {
      marker: {
        enabled: false,
      },
      color: '#F7A35C',
    }
  },
  series: [{
    type: "column",
    name: "Foo",
    data: [],
    canDeleteSeries: false,
    colorByPoint: true,
    colors: ["rgba(0,116,205,0.40)", "rgba(139,166,0,0.40)"]
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 9999
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  },
  credits: {
    enabled: false
  },
  borderWidth: 1,
});

Демо-версия: https://jsfiddle.net/wchmiel/7Lfd0mgc/3/