将子类别添加到 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 轴上所做的事情：多级类别

为什么我的 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>