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

Question

您好，我需要自定义 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

Answer 1

您需要预处理数据以创建 Highcharts 所需的系列结构。 'category' 标签可以通过堆栈标签格式化程序使用 name 属性和 '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

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

How to customize each column in Highcharts stacked column

reactjs

highcharts

stacked-chart