Question

有一个问题，可能是我混合了更多东西，然后应该是，但无论如何，想出这个就好了。

与下面的代码示例有一个小提琴链接

$(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插件 - 分组类别插件。我在这里有一些类别和子类别，并计划在第一列下面显示第一个子类别（男性），在第二列下面显示第二个（女性），依此类推。

正如你在那里看到的那样，我失去了2个顶级类别，如（Grapes和AppBananasles）。

任何建议都将不胜感激！

Answer 1

您需要明确地为该点指定一个类别。

 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/

点放置允许向右/向左移动列，可能需要它，因为你有两个堆栈，每个类别为第二个堆栈创建一个空的空间。

另一种没有不同堆栈的方法可以通过添加空值来重新组织数据。

 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/

HighCharts堆叠分组图表 - 带有分组的护理插件

1 个答案: