Блог

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

Есть ссылка на скрипт с приведенным ниже примером кода

 $(function () {
  $('#container').highcharts({
  chart: {
    type: 'column',
  },
    title: {
        text: ''
    },

  plotOptions: {
    column: {
      stacking: 'normal',
      events: {
        legendItemClick: function () {
          var index = this.index;
          var legendName = this.name;
          var series = this.chart.series;
          series.forEach(function(el, index){
            if(legendName == el.name) {
              if(el.visible)
                el.setVisible(false);
              else
                el.setVisible(true);
            }
          });
          return false;
        }
      },
    },
  },

  yAxis: [{
   labels: {
      format: '{value} $',
      style: {
        color: Highcharts.getOptions().colors[2]
      }
    },
    title: {
      text: 'First Y Axis',
      style: {
        color: Highcharts.getOptions().colors[2]
      }
    },

  }, {
    gridLineWidth: 0,
    title: {
      text: 'Second Y Axis',
      style: {
        color: Highcharts.getOptions().colors[0],
      }
    },
    labels: {
      format: '{value}',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },

  }],

  xAxis: {
    labels: {
        rotation: -90,
          groupedOptions: [{
          rotation: 0,
        style: {
            rotation: 0,
        }
    }],

  },
  categories: [
     {
       name:'Apples', 
       categories: ['male', 'female']
     },
     {
       name:'Oranges', 
       categories: ['male', 'female']
     },
     {
      name:'Pears', 
      categories: ['male', 'female']
     },
     {
       name:'Grapes', 
       categories: ['male', 'female']
     },
     {
       name:'AppBananasles', 
       categories: ['male', 'female']
     }]
    },

    series: [
    {
        name: 'John',
        data: [5, 3, 4, 7, 2],
        stack: 'male'
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5],
        stack: 'male'
    }, {
        name: 'Jane',
        data: [2, 5, 6, 2, 1],
        stack: 'female'
    }, {
        name: 'Janet',
        data: [3, 0, 4, 4, 3],
        stack: 'female'
    },
    ]
})
  

});

https://jsfiddle.net/9o64ybo4/

Используя здесь highcharts и один из плагинов highcharts — плагин grouped-categories. У меня здесь есть несколько категорий и подкатегорий, и я планировал, что 1-я подкатегория (мужская) должна отображаться под первыми столбцами, а вторая (женская) — под вторым столбцом и так далее.

Как вы можете видеть, я потерял 2 категории верхнего уровня, такие как (виноград и AppBananasles).

Любые предложения будут оценены!

Вам нужно явно присвоить точке категорию.

  series: [
            {
        name: 'John',
        data: [[0, 5], [2, 3], [4, 4], [6, 7], [8, 2]],
        stack: 'male',
   //     pointPlacement: 0.15
    }, {
        name: 'Joe',
        data: [[0, 3], [2, 4], [4, 4], [6, 2], [8, 5]],
        stack: 'male',
   //     pointPlacement: 0.15
    }, {
        name: 'Jane',
        data: [[1, 2], [3, 5], [5, 6], [7, 2], [9, 1]],
        stack: 'female',
   //     pointPlacement: -0.15
    }, {
        name: 'Janet',
        data: [[1, 3], [3, 0], [5, 4], [7, 4], [9, 3]],
        stack: 'female',
  //      pointPlacement: -0.15
    },
    ]
  

пример: https://jsfiddle.net/9o64ybo4/1

Размещение точек позволяет перемещать столбец вправо / влево, это может потребоваться, потому что у вас есть два стека, и каждая категория создает пустое место для второго стека.

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

  series: [
            {
        name: 'John',
        data: [5, null, 3, null, 4, null, 7, null, 2, null],
//        stack: 'male'
    }, {
        name: 'Joe',
        data: [3, null, 4, null, 4, null, 2, null, 5, null],
//        stack: 'male'
    }, {
        name: 'Jane',
        data: [null, 2, null, 5, null, 6, null, 2, null, 1],
//        stack: 'female'
    }, {
        name: 'Janet',
        data: [null, 3, null, 0, null, 4, null, 4, null, 3],
 //       stack: 'female'
    },
    ]
  

пример: https://jsfiddle.net/9o64ybo4/2