Highcharts条形图格式数据标签为百分比并添加文本

Question

我有highcharts吧。

如何将数据标签格式化为百分比并添加文本数据标签（我如何重新定位此文本？这需要我创建此栏的垂直版本）？

最后，它应该在水平或垂直解决方案中如此。

＆＃13;

＆＃13;

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Activity'
    },
    xAxis: {
        categories: ['Activity']
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
        	borderWidth: 0,
            stacking: 'normal',
            pointWidth: 3,
            dataLabels: {                
                enabled: true,
                y: 2,
                verticalAlign: 'top',
                align: 'left',
                color: '#000000',
             style: {
                    textOutline: false 
                }
            }
        }
    },
    series: [{
        name: 'One',
        data: [10],
        color: '#f45b69'
    }, {
        name: 'Two',
        data: [20],
        color: '#44bba4'
        
    }, {
        name: 'Three',
        data: [30],
        color: '#ff9f1c'
    }]
});

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要仅显示带有百分号的数字以及系列名称，您可以设置df3_clear = df3['1997-11-30 23:00':'1998-03-01'].query('NetLW < -30') df3_clear = df3_clear.iloc[np.where((df3_clear.index.hour == 23) | (df3_clear.index.hour == 11))] 格式，如下所示：

dataLabels

如果您想要更改外观或拥有更多自定义功能，可以使用formatter代替plotOptions: { series: { format: '{y} % <br/> {series.name}', ... } } 。

工作示例： https://jsfiddle.net/ewolden/y5ygdx2a/1/

关于dataLabels.format的API： https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format