Highcharts 柱形图显示数值并设置数值格式

￡神魔★判官ぃ 2023-10-06 12:48 15阅读 0赞

原始效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

实现代码：

<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
            <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
            <script type="text/javascript">
                $(function () {
                    var chart; 
                    $(document).ready(function() {
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container',
                                type: 'column'
                            },
                            credits : {
                                enabled:false//不显示highCharts版权信息
                            },
                            xAxis: {
                                categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']
                            },	 
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0,
                                    dataLabels: {
                                        enabled: true, //设置显示对应y的值
                                        style: {
                                            color: '#000',
                                        },
                                    }
                                }
                            }, 
                            series: [{
                                name: 'series1',
                                data: [2,4,5,9,2]
                            },{
                                name:'series2',
                                data:[3,5,7,2,1]
                            }]
                        });
                        $(".highcharts-button").each(function () {
                            $(this).hide();
                        });
                        $(".highcharts-contextbutton").each(function () {
                            $(this).show();
                        });
                    });
                });
            </script>
        </head>
        <body>
            <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
        </body>
    </html>

最终效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200710151117823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200710151554269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70