Группируйте категории в столбчатых старших диаграммах с пользовательским представлением

Question

Привет всем,

Я использую старшие чарты с угловым 4.

Я хочу создать диаграмму, чтобы показать результат чего-то вроде этого:

Где:

• GHRM и HR Scanner являются именами приложений.

• Мы показываем некоторые данные по группам (приложение здесь)

Для достижения вышеуказанного результата я попытался использовать тип диаграммы столбцов в старших диаграммах. Ниже приведен URL-адрес:

[https://jsfiddle.net/k1dzcrbj/][2]

Но результат вышеуказанной ссылки отличается от моего требования. Как вы можете видеть результат вышеупомянутой ссылки:

Может ли кто-нибудь помочь мне узнать, как я могу настроить представление категорий в этом случае для достижения результата, как показано на первом снимке экрана.

Спасибо заранее за вашу помощь.

Answer 1

Получение такого вида с помощью сгруппированных категорий плагин было бы довольно сложной задачей.

Другой подход заключается в использовании отдельной оси x для каждого набора категорий (GHRM и HR Scanner в вашем случае).

Оси можно позиционировать через свойства left и top, а размеры - через свойства height. Эти параметры еще не задокументированы, но они работают. Они принимают относительные значения в процентах (например, 30%) и абсолютные значения в пикселях (например, 200px).

  xAxis: [{
    categories: ['Category 1'],
    tickWidth: 0,
    height: '30%',
    offset: 0,
    title: {
      text: 'First x axis',
      rotation: 0,
      align: 'high'
    }
  }, {
    categories: ['Category 2', 'Category 3'],
    tickWidth: 0,
    height: '60%',
    top: '40%',
    offset: 0,
    title: {
      align: 'high',
      text: 'Second x axis',
      rotation: 0
    }
  }],

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

  series: [{
    data: [
      [1, 7]
    ],
  }, {
    data: [
      [2, 4],
      [3, 8]
    ],
    xAxis: 1
  }]

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

grouping должен быть отключен, чтобы столбцы всегда были в центре. pointPadding, groupPadding и borederWidth заставляют столбцы занимать максимальный вертикальный диапазон.

Все остальные параметры конфигурации осей можно найти в Highcharts API : https://api.highcharts.com/highcharts/