javascript - Highcharts 柱形图分组

Question

我有一个包含以下对象的数组:

现在我的目标是创建看起来像这样的柱形图:

然后是数组中的下一个对象。

我一直在浏览文档，我所能找到的只是这样的:

Highcharts demo

问题在于您在系列中设置的data 值。如果插入一个数组，它将分为所有类别。据我所知，您无法将一个数据系列锁定到一个类别。

接下来我可以尝试什么？

我的尝试:

我正在尝试用这个 fiddle :

 Highcharts.chart('container', {
        xAxis: {
            minPadding: 0.05,
            maxPadding: 0.05,
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },
        series: [{
                type: 'column',
            name: 'Apples',
            zoneAxis: 'x',
            data: [
                ['First', 29.9],
                ['Second', 71.5],
                ['Third', 106.4]
            ]
        },{
            type: 'column',
          name: 'oranges',
          data:[
            ['A', 20]
          ]
        }]
    });

Fiddle

Answer 1

可能有很多方法可以解决这个问题，最佳选择取决于您的需求的具体程度。

首先想到的方法是操纵数据和类别的结构。

示例:

   xAxis: {
      categories: ['Group 1', 'Group 2', 'Group 3'],
      labels: { style: { fontWeight: 'bold' } }
    },
    series: [{
      name: 'Subset A',
            data: [{y: 10, name: '1A'}, {y: 5, name: '2A'}, {y: 7, name: '3A'}]
    }, {
      name: 'Subset B',
            data: [{y: 5, name: '1B'}, {y: 3, name: '2B'}, {y: 4, name: '3B'}]
    }]

因此，假设分为三组，每组有两分。您希望第一个类别显示组 1 中的点 A 和 B，第二个类别显示点 A和来自组 2 的 B 等。

fiddle :

• http://jsfiddle.net/jlbriggs/hLfajxz9/

输出:

这样做的主要潜在缺点是图例将显示/隐藏点 A 或 B，而不是组 1、2 或 3。

如果存在问题，您可以通过添加显示/隐藏类别的功能来解决此问题。

在这里查看这个问题的答案:

• How to show/hide categories with checkbox using highcharts?

以及相关的 fiddle :

• http://jsfiddle.net/jlbriggs/wqwawuLq/