将子类别添加到 highcharts 上的 y 轴

Question

我正在尝试在 highcharts 上的热图上向我的 yaxis 添加子类别，但我收到了[object, object]

我正在尝试将 iphone 和 ipad 添加为类别，并将 google、bing 和 jeeves 添加为子类别。

这是我在文档中看到的创建多级类别的方法：

yAxis: {
        categories: [
        {
            name: "iphone",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        },
        {
            name: "ipad",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        }
        ]
    }

这是我的代码：

function getPointCategoryName(point, dimension) {
        var series = point.series,
        isY = dimension === 'y',
        axis = series[isY ? 'yAxis' : 'xAxis'];
        return axis.categories[point[isY ? 'y' : 'x']];
    }

    Highcharts.chart('container', {

        chart: {
            type: 'heatmap',
        /* marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1 */
    },

    xAxis: {
        categories: ['val1', 'val2', 'val3',]
    },

    yAxis: {
        categories: [
        {
            name: "iphone",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        },
        {
            name: "ipad",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        }
        ]
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var ix = point.index + 1,
                xName = getPointCategoryName(point, 'x'),
                yName = getPointCategoryName(point, 'y'),
                val = point.value;
                return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
            }
        }
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    /* legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    }, */

    tooltip: {
        formatter: function () {
            return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
            this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
        }
    },

    series: [{

        borderWidth: 1,
       // xAxis: 1,
       data:[[0, 0, 67],
       [0, 1, 23],
       [0, 2, 10],
       [0, 3, 67],
       [0, 4, 23],
       [0, 5, 10],
       [1, 0, 78],
       [1, 1, 12],
       [1, 2, 20],
       [1, 3, 78],
       [1, 4, 12],
       [1, 5, 20],
       [2, 0, 12],
       [2, 1, 14],
       [2, 2, 30],
       [2, 3, 12],
       [2, 4, 14],
       [2, 5, 30]]
       ,
       dataLabels: {
        enabled: true,
        color: '#000000'
       }
   }],

   responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            yAxis: {
                labels: {
                    formatter: function () {
                        return this.value.charAt(0);
                    }
                }
            }
        }
    }]
   }

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

我正在尝试做一些类似于此解决方案中 x 轴上所做的事情：multilevel categories

为什么我的 y 轴没有显示任何类别和子类别。

Answer 1

您缺少 grouped-categories 插件，但正如您在此示例中看到的那样：http://jsfiddle.net/BlackLabel/46j9xsow/ 它不能很好地与 y 轴配合使用。

作为一种解决方案，我建议您在 x 轴上使用倒排图表和分组类别。

    chart: {
        inverted: true
    }

---

现场演示： http://jsfiddle.net/BlackLabel/sm2qbgkr/

API 参考： https://api.highcharts.com/highcharts/chart.inverted

文档： https://www.npmjs.com/package/highcharts-grouped-categories

Answer 2

如下添加y轴值

 yAxis: {
     labels: {
      formatter: function() {
       return categories[0].name
    }
 }
},

var categories = [
        {
            name: "iphone",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        },
        {
            name: "ipad",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        }
       ];
function getPointCategoryName(point, dimension) {
        var series = point.series,
        isY = dimension === 'y',
        axis = series[isY ? 'yAxis' : 'xAxis'];
        return axis.categories[point[isY ? 'y' : 'x']];
    }

    Highcharts.chart('container', {

        chart: {
            type: 'heatmap',
        /* marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1 */
    },

    xAxis: {
        categories: ['val1', 'val2', 'val3',]
    },

    yAxis: {
         labels: {
          formatter: function() {
           return categories[0].name
        }
     }
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var ix = point.index + 1,
                xName = getPointCategoryName(point, 'x'),
                yName = getPointCategoryName(point, 'y'),
                val = point.value;
                return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
            }
        }
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    /* legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    }, */

    tooltip: {
        formatter: function () {
            return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
            this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
        }
    },

    series: [{

        borderWidth: 1,
       // xAxis: 1,
       data:[[0, 0, 67],
       [0, 1, 23],
       [0, 2, 10],
       [0, 3, 67],
       [0, 4, 23],
       [0, 5, 10],
       [1, 0, 78],
       [1, 1, 12],
       [1, 2, 20],
       [1, 3, 78],
       [1, 4, 12],
       [1, 5, 20],
       [2, 0, 12],
       [2, 1, 14],
       [2, 2, 30],
       [2, 3, 12],
       [2, 4, 14],
       [2, 5, 30]]
       ,
       dataLabels: {
        enabled: true,
        color: '#000000'
       }
   }],

   responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            yAxis: {
                labels: {
                    formatter: function () {
                        return this.value.charAt(0);
                    }
                }
            }
        }
    }]
   }

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>