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

样式（圆角、字体、滚动条、滚动条样式）"/>

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

举个栗子：

先说一下用法：引用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图表时需要引用-->

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

://www.hcharts/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 及以下版本的浏览器中，只有第一个和最后一个颜色的透明度有效

 这些官方文档里都有

://www.hcharts/docs/colorsAPI文档：

.scrollbar.barBackgroundColor.html.scrollbar.barBackgroundColor.html提示一下：API文档这里也要选择Highcharts Stock才能查到滚动条的配置信息