Строка Highchart Persist с пустыми данными

Question

У меня есть простая диаграмма HighStock с двумя сериями, как показано на изображении ниже:

Таким образом, с точки зрения функциональности HighChart уменьшает ширину полосыкак только новая серия будет добавлена.

Но я не хочу уменьшать ширину полосы, когда в определенной точке есть данные только для одного ряда.(дата 17 мая)

Вот созданная мной Скрипка .Попробуйте скрыть одну из серий и посмотрите ширину полосы.Для столбца «17 мая» должна применяться одинаковая ширина, когда видны обе серии, поскольку для этой даты имеются данные только для одной серии.Как показано ниже:

Я использовал следующий код:

Highcharts.stockChart('container', {
    chart: {
        alignTicks: false
    },
            legend: {
        enabled: true
    },
    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'AAPL Stock Volume'
    },

  "series":[
    {
      "name":"Key Rate 319",
      "type":"column",
      "data":[{x: 1147651200000, y: 1}, {x: 1147737600000, y: 7}, {x: 1147824000000, y: 5}, {x: 1147910400000, y: 4}],
      "marker":{"enabled":false},
      "shadow":false,
      "color":"blue"
    },
    {
      "name":"Key Rate 321",
      "type":"column",
      "data":[{x: 1147651200000, y: 4}, {x: 1147737600000, y: 2}, {x: 1147824000000, y: null}, {x: 1147910400000, y: 1}],
      "color":"green"
    }]
});

Как мне этого добиться?

Answer 1

Серия

имеет два свойства для управления диапазоном и расположением точек: pointRange & pointPlacement.Они работают для точек всех серий и, к сожалению, не могут применяться к отдельным столбцам.

Обходной путь

Отключить grouping и сбросить pointPadding & groupPadding:

  plotOptions: {
    series: {
      grouping: false,
      pointPadding: 0,
      groupPadding: 0
    }
  },

Создайте отдельные серии для каждой точки и примените к ним соответствующие pointRange & pointPadding.Затем свяжите их, используя свойство linkedTo, чтобы имитировать исходную структуру серии:

  series: [{
    name: 'First series',
    color: '#bada55',
    data: [
      [0, 2]
    ],
    pointRange: 0.4,
    pointPlacement: -0.5
  }, {
    data: [
      [1, 7]
    ],
    linkedTo: ':previous',
    color: '#bada55',
    pointRange: 0.4,
    pointPlacement: -0.5
  }, {
    data: [
      [2, 5]
    ],
    linkedTo: ':previous',
    color: '#bada55',
    //pointRange: 1, // by default
    //pointPlacement: 0 // by default
  }, {
    data: [
      [3, 4]
    ],
    linkedTo: ':previous',
    color: '#bada55',
    pointRange: 0.4,
    pointPlacement: -0.5
  }, {
    name: 'Second series',
    data: [
      [0, 1]
    ],
    color: '#c0ffee',
    pointRange: 0.4,
    pointPlacement: 0.5
  }, {
    data: [
      [1, 2]
    ],
    linkedTo: ':previous',
    color: '#c0ffee',
    pointRange: 0.4,
    pointPlacement: 0.5
  }, {
    data: [
      [3, 2]
    ],
    linkedTo: ':previous',
    color: '#c0ffee',
    pointRange: 0.4,
    pointPlacement: 0.5
  }]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/q7j4m8eb/

Недостаток этого подхода заключается в том, что вы должныопределите цвет для каждой точки (серии) явно, и структура данных выглядит немного сложной.

Все перечисленные выше опции можно найти в API: https://api.highcharts.com/highcharts/