Блог

Главная - Вопросы по программированию - Поддерживает ли highcharts отображение групп столбцов с разными значениями x?

Поддерживает ли highcharts отображение групп столбцов с разными значениями x?

#javascript #highcharts

Вопрос:

По сути, я пытаюсь отобразить несколько диаграмм одновременно для разных значений категорий/x. Каждое значение x-это категория с переменным количеством столбцов, которые я хочу отобразить. Я подхожу довольно близко вот так: https://jsfiddle.net/6ma07nhw/

 Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  xAxis: {
    categories: ['group 0', 'groub 1', 'group 2', 'group 3', 'group 4', 'group 5', 'group 6']
  },

  series: [
                {data: [{x: 0,y: 10}, {x: 1,y: 20}, {x: 5,y: 15}, {x: 2,y: 10}, {x: 3,y: 40}, {x: 6,y: 20}]},
          {data: [{x: 1,y: 10},  {x: 5,y: 10} ]},
      {data: [{x: 1,y: 19}]},
      {data: [{x: 1,y: 10}]},
  ]

});

Каждая серия имеет только одно значение на x. Для каждого отдельного столбца в x я создал новую серию. Визуально это близко (за исключением того, что серии не связаны, поэтому мне нужно будет изменить наведение и изменить/скрыть легенду). Но колонны смещены от центра. Если я добавлю больше серий, это станет все более и более заметным. Я предполагаю, что для каждой серии есть свое место.

Похоже, что использование нескольких рядов предназначено для отображения значений один раз на значение x в серии. Когда я пытаюсь отобразить все это в одной серии, столбцы перекрывают друг друга: https://jsfiddle.net/ko2vpbsg/

 Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  xAxis: {
    categories: ['group 0', 'groub 1', 'group 2', 'group 3', 'group 4', 'group 5', 'group 6']
  },

  series: [{ 
      data: [{x: 0,y: 10}, {x: 1,y: 20}, {x: 1,y: 10}, {x: 5,y: 15}, {x: 2,y: 10}, {x: 5,y: 10}, {x: 3,y: 40}, {x: 1,y: 19}, {x: 1,y: 10}, {x: 6,y: 20}]
  }]

});

Поддерживает ли highcharts визуализацию столбчатой диаграммы таким образом?

Ответ №1:

Да, вы должны использовать первый подход с несколькими сериями. Вы можете применить одни и те же параметры для многих серий, используя plotOptions свойство. Разрешить centerInCategory игнорировать пустые или отсутствующие точки.

     plotOptions: {
        column: {
            centerInCategory: true
        }
    }

Живая демонстрация: https://jsfiddle.net/Черная метка/b4gdjtz7/

Ссылка на API: https://api.highcharts.com/highcharts/plotOptions.column.centerInCategory

Метки: