Highchart：在柱形图的每一列上显示百分比答案

【问题标题】：Highchart: To display percent on each and every column of Column chartHighchart：在柱形图的每一列上显示百分比
【发布时间】：2022-01-18 01:30:20
【问题描述】：

如何为这个条形图中所有列的不同数据标签设置不同的颜色。在这段代码中，我只是为这个图表中的所有数据标签设置了橙色。如何将不同的颜色应用于列顶部的所有数据标签。

  column: {

               colorByPoint: true,
                borderWidth: 0,


               dataLabels: {
                         format: '{point.y:.f}%',
                         enabled: true,
                    style: {
                            fontWeight: 'normal',
                        fontSize: '30px',
                color: '#FF6F61',
                fontFamily:'Sans Serif Regular',
                textOutline: '1px contrast'
                            }
                         },

              series: {
                     pointWidth: 195,   
                         minPointLength: 50,
                        colors :[
                     '#800000', 
                     '#DB7093', 
                     '#FF7F50', 
                     '#008080', 
                     '#006400'

                     ]

                    }
           }
        };  
        var credits = {
           enabled: false
        };
        var series= [
           {

              name: 'HSBC',
              data: [{y:50}, {y:10},{y:30}, {y:9}, {y:1}]

           }

        ];

【问题讨论】：

我不是 100% 清楚你想要什么。您希望 dataLables 位于列上方还是列内，但位于顶部？
Hello Barbara..我只想在列上方显示 dataLabels。它应该显示带有百分比符号的值。谢谢

标签： javascript python angularjs highcharts

【解决方案1】：

如果我理解正确，您希望列上方的标签采用 % 格式。
您实际上并没有使用堆叠列，但这就是橙色标签的来源（stackLabels）。因此，删除这些，然后使用列标签的默认位置。

column: {

  dataLabels: {
    format: '{point.y:.1f}%',
    enabled: true,
    color: 'Black'
  },

  colorByPoint: true,
  borderWidth: 0
},

https://jsfiddle.net/zkb70gsa/

【讨论】：