HighCharts在数据值中增加了百分比符号



任何人都可以帮助我在数据值中添加百分比符号。像附件图像

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: 
        [
        '13/02/2018', 
        '14/02/2018', 
        '15/02/2018', 
        '16/02/2018', 
        '17/02/2018', 
        '18/02/2018', 
        '19/02/2018', 
        '20/02/2018', 
        '21/02/2018', 
        '22/02/2018', 
        '23/02/2018', 
        '24/02/2018',
        '25/02/2018',
        '26/02/2018',
        '27/02/2018',
        '28/02/2018'
        ],
        labels: {
            rotation: -45,
            style: {
                fontSize: '12px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true,
            },
            enableMouseTracking: false
        }
    },
    colors: [
        '#ffefe9',
        '#fdbaa0',
        '#fb621f'
    ],
    series: [{
        name: 'Tokyo',
        data: 
        [
        5.0,
        1.9,
        1.4,
        0.7,
        1.5,
        1.9,
        1.8,
        3.3,
        2.4,
        2.4,
        4.7,
        2.9,
        2.3,
        2.9,
        2.3,
        2.2 
        ]
    }, {
        name: 'London',
        data: 
        [
        8.5,
        1.0,
        2.0,
        1.9,
        1.6,
        2.2,
        2.5,
        2.0,
        2.9,
        2.5,
        1.7,
        2.9,
        2.8,
        2.9,
        2.3,
        2.2
        ]
    }]
});

在此处输入图像说明

您可以在plotOptions中应用format,如下所示:

 plotOptions: {
   series: {
        dataLabels: {
            enabled: true,
            format: '{y} %'
        }
    },
        enableMouseTracking: false           
}

请参阅下面的代码段:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: 
        [
        '13/02/2018', 
        '14/02/2018', 
        '15/02/2018', 
        '16/02/2018', 
        '17/02/2018', 
        '18/02/2018', 
        '19/02/2018', 
        '20/02/2018', 
        '21/02/2018', 
        '22/02/2018', 
        '23/02/2018', 
        '24/02/2018',
        '25/02/2018',
        '26/02/2018',
        '27/02/2018',
        '28/02/2018'
        ],
        labels: {
            rotation: -45,
            style: {
                fontSize: '12px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    plotOptions: {
       series: {
            dataLabels: {
                enabled: true,
                format: '{y} %'
            }
        },
            enableMouseTracking: false
        
    },
    colors: [
        '#ffefe9',
        '#fdbaa0',
        '#fb621f'
    ],
    series: [{
        name: 'Tokyo',
        data: 
        [
        5.0,
        1.9,
        1.4,
        0.7,
        1.5,
        1.9,
        1.8,
        3.3,
        2.4,
        2.4,
        4.7,
        2.9,
        2.3,
        2.9,
        2.3,
        2.2 
        ]
    }, {
        name: 'London',
        data: 
        [
        8.5,
        1.0,
        2.0,
        1.9,
        1.6,
        2.2,
        2.5,
        2.0,
        2.9,
        2.5,
        1.7,
        2.9,
        2.8,
        2.9,
        2.3,
        2.2
        ]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container">
</div>

最新更新