如何自定义Highcharts堆叠列中的每一列答案

【问题标题】：How to customize each column in Highcharts stacked column如何自定义Highcharts堆叠列中的每一列
【发布时间】：2020-06-27 04:53:32
【问题描述】：

您好，我需要自定义 highcharts 堆叠列中的每一列

like this image

我给出的这个实现是这样的

{
categories:["6-7","7-8"]
series: [{
        name: 'pass',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Fail',
        data: [2, 2, 3, 2, 1]
    }]
}

但现在我需要更改此实现，我必须自定义每一列并添加类别我如何实现这一点我有一个这样的数组

[{"pass":2,"fail":3,"category":"6-7","percentage":"20%"}
{"pass":5,"fail":0,"category":"7-8","percentage":"10%"}]

我想要这样

|percentage|
------------
|  pass    |
|  fail    |
-----------------
  category

【问题讨论】：

标签： reactjs highcharts stacked-chart

【解决方案1】：

您需要预处理数据以创建 Highcharts 所需的系列结构。 'category' 标签可以通过使用 name 属性和 stack-labels formatter 的 'percentage' 来实现：

var data = [{
    "pass": 2,
    "fail": 3,
    "category": "6-7",
    "percentage": "20%"
}, {
    "pass": 5,
    "fail": 0,
    "category": "7-8",
    "percentage": "10%"
}];

var series = [{
    name: 'Pass',
    data: []
}, {
    name: 'Fail',
    data: []
}];

data.forEach(function(dataObj) {
    series[0].data.push({
        y: dataObj.pass,
        name: dataObj.category,
        percentage: dataObj.percentage
    });
    series[1].data.push({
        y: dataObj.fail,
        name: dataObj.category
    });
});

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        stackLabels: {
            enabled: true,
            formatter: function() {
                return this.axis.series[0].options.data[this.x].percentage;
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: series
});

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

API 参考： https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter

【讨论】：