javascript - 在图表上显示系列堆栈标签

Question

尝试搜索此内容，但空手而归，因此如果该答案确实存在，我深表歉意。

请看我的 fiddle https://jsfiddle.net/bautistaaa/h6fbvdyf/3/

数据片段:

series: [{
        name: 'CSI A',
        data: [5,4,3,2,1],
        stack: 'open',
        color: Highcharts.getOptions().colors[0],
    }, {
            name: 'CSI A',
        data: [1,2,3,4,5],
        stack: 'realized',
        linkedTo: ':previous'
    }

你会注意到我有两个堆栈..一个用于实现，一个用于开放。如何实际在每列下方显示 Open 和 Realized，以便用户不必将鼠标悬停在列上即可查看工具提示中的堆栈。也许作为奖励，只有当数据存在于其上方时，才会出现 Open 和 Realized。

提前致谢

Answer 1

您可以使用标签的自定义格式来做到这一点。 它不是100%完美的。您可以调整样式以使其更适合。

注意:useHTML 需要设置为 true 才能正常工作

xAxis: {
        categories: ['FY17', 'FY18', 'FY19', 'FY20', 'FY21'],
        labels: {
            formatter: function(){
          console.log(this);
            return '<span style="margin-right: 15px">' + this.chart.series[0].options.stack + '</span><span>' +                             this.chart.series[1].options.stack + 
            '</span><br /><div style="text-align:center">' + this.value + '</div>'
          },    
          useHTML: true
        }    
    },