如何在高图中的列内添加带有数据的百分号？

Question

我正在使用列高图。现在我想在我的数据后使用 % 符号。比如，如果我有数据值 7.18，我想以 7.18% 的格式显示它。我怎样才能做到这一点？如果有人有任何想法，请与我分享。

我的代码如下：

       $('#cagr2').highcharts({
        chart: {
            type: 'column',
             spacingBottom: -7,
             spacingTop:20
        },
        title: {
            text: ''
        },  exporting: { enabled: false },
         credits: {
      enabled: false
         },
        xAxis: {
            lineColor: 'transparent', 
            categories: ['']
        },
        yAxis: {

   lineWidth: 0,
   minorGridLineWidth: 0,
   minorGridLineWidth: 0,
   gridLineColor: 'transparent',
   lineColor: 'transparent',

   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0,
              min: 0,
             title: {
                text: ''
            },
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },

        legend: {
          enabled: true,
            layout: 'horizontal',
            align: 'center',
            //x: -10,
            verticalAlign: 'top',
            y: -5,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#ffffff',
            borderWidth: 1,
            shadow: true
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b>',
            pointFormat: '{series.name}: {point.y}',
            valueSuffix: ' %'
        },

        plotOptions: {
           series: {

                animation: {
                    duration: 7000
                }

            },

            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black',
                        fontSize: '18px'
                    }
                }
            }
        },
        series: [{
            name: 'Rate of return',
            data: [parseFloat(cagr)]
        }]
    });

Answer 1

您在这里需要做的就是将 format 或 formatter 属性添加到您的 dataLabels。

示例使用 format:

column: {
    stacking: 'normal',
    dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
        style: {
            textShadow: '0 0 3px black',
            fontSize: '18px'
        },
        format: '{y} %', // your label's value plus the percentage sign
        valueDecimals: 2 // show your label's value up to two decimal places
    }
}

示例使用 formatter:

column: {
    stacking: 'normal',
    dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
        style: {
            textShadow: '0 0 3px black',
            fontSize: '18px'
        },
        formatter: function() {
            // numberFormat takes your label's value and the decimal places to show
            return Highcharts.numberFormat(this.y, 2) + '%';
        },
    }
}

这将是这样的：

希望对您有所帮助！

如何在高图中的列内添加带有数据的百分号？

How to add percent symbol with data inside column in highchart?

charts

data-visualization

highcharts

column-chart