Highcharts条形图/柱状图修改样式（圆角、字体、滚动条、滚动条样式）

原创已于 2024-04-17 10:51:04 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#数学建模 #html #前端 #javascript

于 2023-05-31 20:15:15 首次发布

本文介绍了如何引用Highcharts的相关js文件，特别是highstock.js与highcharts.js的区别，以及如何设置3D图表和柱状图的圆角、渐变色。同时，详细讲解了如何启用和定制滚动条样式，包括颜色、大小等参数。此外，文中提供了代码示例，展示了柱状图的完整配置，包括数据、颜色渐变和滚动条功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

举个栗子：

先说一下用法：引用js文件

<script src="../../new/js/jquery.min.js"></script>
<!--先引用jQuery-->
<script src="../../new/js/highstock.js"></script>
<!--<script src="../../new/js/highcharts.js"></script>-->
<!--这里说一下highstock文件和highcharts文件的区别，如果条形图需要使用滚动条的话就引用highstock.js文件，highcharts.js文件不能使用滚动条scrollbar属性的。这两个文件只需要引用一个即可-->
<script src="../../new/js/highcharts-3d.js"></script>
<!--highcharts-3d.js这个文件是需要用到Highcharts里一些3D图表时需要引用-->

（避坑：按文章步骤来如果滚动条设置无效，highstock.js和highcharts.js引用一个即可）

注意看官方文档引用顺序

官方文档里可以下载也有用法说明：

https://www.hcharts.cn/downloadhttps://www.hcharts.cn/download

提示一下：如果需要用highstock.js文件的话就下载Highcharts Stock的压缩包

本文章用的是highstock.js文件

给div设置id名然后Highcharts.chart方法后面跟这个id名就能加到div里，div长宽都无所谓自己设置即可

<div id="container" style="width:400px;height:400px"></div>

var chart = Highcharts.chart('container', {
                chart: {
                    type: 'bar',
                    //设置图表背景色
                    backgroundColor: 'rgba(255,255,255,0)',
                },
                title: {
                    text: null,
                },
                xAxis: {
                    categories: ['维操队一', '维操队二', '维操队三', '维操队四', '维操队五','维操队六', '维操队七', '维操队八', '维操队九', '维操队十'],
                    labels: {
                        //设置X轴样式
                        style:{
                            color:'#FFFFFF',
                        },
                    },
                    //启用滚动条时一定要添加min，max属性。取决于图表默认显示几条数据，max设置为4下面效果图里就只有5条数据，设置为3就只有4条数据
                    min: 0,
                    max: 4,
                    //设置滚动条
                    scrollbar: {
                        //enabled为false时关闭滚动条
                        enabled: true,
                        //滚动条的宽高尺寸
                        size:12,
                         //滚动条本身的样式
                        barBorderRadius:8,
                        barBackgroundColor: '#00D8FF',
                        barBorderColor:'rgba(255,255,255,0)',
                         //滚动条两边钮钮的样式
                        buttonBorderRadius:5,
                        buttonBackgroundColor:'rgba(255,255,255,0)',
                        buttonBorderColor:'rgba(255,255,255,0)',
                        //滚动条里的图标样式
                        rifleColor:'rgba(255,255,255,0)',
                        //滚动条轨道样式
                        trackBackgroundColor: 'rgba(255,255,255,0)',
                        trackBorderColor: 'rgba(255,255,255,0)',

                    },
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: null,
                    },
                    labels: {
                        style:{
                            color:'#FFFFFF',
                        },
                    },
                },
                legend: {
                    reversed: true,
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                series: [{
                    name: '已完成',
                    data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1],
                    color: {
                    //设置条形/柱状渐变色
                        linearGradient: { x1: 0, x2: 0, y1: 1, y2: 0 },
                        stops: [
                            [0, '#50EFB1'],
                            [1, '#00E0DB']
                        ]
                    },
                    //添加圆角样式
                    borderRadius: 10,
                },{
                    name: '未完成',
                    data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2],
                    //设置条形/柱状渐变色
                    color: {
                        linearGradient: { x1: 0, x2: 0, y1: 1, y2: 0 },
                        stops: [
                            [0, '#FC4768'],
                            [1, '#F8D03F']
                        ]
                    },
                    //添加圆角样式
                    borderRadius: 10,
                }]
            });

效果么大概长这样：

圆角样式：

整体设置圆角：borderRadius: Number

左上角圆角半径：borderRadiusTopLeft:Number

右上角圆角半径：borderRadiusTopRight:Number

左下角圆角半径：borderRadiusBottomLeft:Number

右下角圆角半径：borderRadiusBottomRight:Number

说一下滚动条，我这里把滚动条本身以外的样式都设置成透明了如果不设置成透明的话效果会是这样↓↓↓↓↓↓↓↓↓↓

说一下渐变色

linearGradient：渐变的起始点，其中 (x1, y1) 为起始点，(x2, y2) 结束点，其中 (0, 0) 点为图形的左上角，(1, 1) 为图形的右下角
stops：渐变位置及颜色数组，每个数组里的第一个值为渐变位置，0 表示渐变的起点，1 为渐变终点；数组里的第二个值为渐变色，该颜色同样支持 rgba 格式，但是在 IE8 及以下版本的浏览器中，只有第一个和最后一个颜色的透明度有效

这些官方文档里都有

https://www.hcharts.cn/docs/colorshttps://www.hcharts.cn/docs/colorsAPI文档：

https://api.hcharts.cn/highstock/yAxis.scrollbar.barBackgroundColor.htmlhttps://api.hcharts.cn/highstock/yAxis.scrollbar.barBackgroundColor.html提示一下：API文档这里也要选择Highcharts Stock才能查到滚动条的配置信息

补充一下：我用了11.4.1的版本圆角样式没有效果！！！自行测试吧

例2、比例图（这个是比例图！！！）

引用10.0.0版本，引用的版本要一致

Highcharts.chart('personnelChart', {
        chart: {
            type: 'column',
            //设置图表背景色
            backgroundColor: 'rgba(255,255,255,0)',
            inverted:true,
        },
        title: {
            text: null,
        },
        xAxis: {
            categories: ['维操队一', '维操队二', '维操队三', '维操队四', '维操队五','维操队六', '维操队七', '维操队八', '维操队九', '维操队十'],
            labels: {
                //设置X轴样式
                style:{
                    color:'#FFFFFF',
                },
            },
            //启用滚动条时一定要添加min，max属性。取决于图表默认显示几条数据，max设置为4下面效果图里就只有5条数据，设置为3就只有4条数据
            min: 0,
            max: 2,
            //设置滚动条
            scrollbar: {
                //enabled为false时关闭滚动条
                enabled: true,
                //滚动条的宽高尺寸
                size:12,
                //滚动条本身的样式
                barBorderRadius:8,
                barBackgroundColor: '#00D8FF',
                barBorderColor:'rgba(255,255,255,0)',
                //滚动条两边钮钮的样式
                buttonBorderRadius:5,
                buttonBackgroundColor:'rgba(255,255,255,0)',
                buttonBorderColor:'rgba(255,255,255,0)',
                //滚动条里的图标样式
                rifleColor:'rgba(255,255,255,0)',
                //滚动条轨道样式
                trackBackgroundColor: 'rgba(255,255,255,0)',
                trackBorderColor: 'rgba(255,255,255,0)',

            },
        },
        yAxis: {
            min: 0,
            title: {
                text: null,
            },
            labels: {
                style:{
                    color:'#FFFFFF',
                },
            },
        },
        legend: {
            reversed: true,
        },
        plotOptions: {
            column: {
                stacking: 'percent',
                dataLabels: {
                    enabled: true,
                    format: '{point.percentage:.0f}%'
                },
            },
        },
        series: [{
            name: '已完成',
            data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1],
            color: {
                //设置条形/柱状渐变色
                linearGradient: { x1: 0, x2: 0, y1: 1, y2: 0 },
                stops: [
                    [0, '#50EFB1'],
                    [1, '#00E0DB']
                ]
            },
            //添加圆角样式
            borderRadius: 10,
        },{
            name: '未完成',
            data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2],
            //设置条形/柱状渐变色
            color: {
                linearGradient: { x1: 0, x2: 0, y1: 1, y2: 0 },
                stops: [
                    [0, '#FC4768'],
                    [1, '#F8D03F']
                ]
            },
            //添加圆角样式
            borderRadius: 10,
        }]
    });

效果：