作者：乔山办公网日期：
返回目录：office365
随便的输入一些简单的数据，依次点击菜单栏中的插入——柱形图，选择第一个子图形
这样，便可以看来到所做的柱形图，但是默认添加的柱形图的柱子的宽度可能不够美观，所以在我们美化柱形图是需要对其进行修改
选中柱形图的柱子，右键单击在弹出的的选择框中，选择最后一项设置数据系列格式
在弹出的来源的设置绘图区格式对话框中，可以看到第一个系列选项中的分类间距
将数值从默认的150调大到200，点击关闭，可以看到柱形图的柱子宽度变窄了，相相反的如果我们将数值从150调小到100，则会发现柱形图的柱子变宽了
这样我们便可以根据调节合适的数值，来调节柱形图中柱子的宽度，进而美化我们制备的条形图了
Excel 技巧：[4]如何修zd改柱状图柱子的宽度
双击柱状图的柱形条——填充——选择无填充颜色即可！
把其中一个的柱坐标轴改成次坐标轴，再将重叠比例变成100，分类间距变动一下，把坐标轴的最高刻度改成一致，画个透明图，复制粘贴即可。
以先对数据源的数据进行排序
为了让图表每一根柱子的颜色可配置，我们首先定义一个颜色数组：
//定义一个全局颜色数组
var colorArr = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#000000','#560f23'];
复制代码
接着我们要设置每7a686964616fe58685e5aeb9365一个柱子的linearGradient才行的，这里我们采用在图表创建的回调函数内去完成这个动态颜色切换的效果。
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
subtitle: {
text: 'Source: '
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '{point.key}',
pointFormat: '
' +
'
',
footerFormat: '
{series.name}: {point.y:.1f} mm
',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
credits: {
text: "",
href: "http://",
style: {
color: "red"
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, function (chart) {
SetEveryOnePointColor(chart);
});
});
//设置每一个数据点的颜色值
function SetEveryOnePointColor(chart) {
//获得第一个序列的所有数据点
var pointsList = chart.series[0].points;
//遍历设置每一个数据点颜色
for (var i = 0; i < pointsList.length; i++) {
chart.series[0].points[i].update({
color: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
stops: [
[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
[0.5, 'rgb(255, 255, 255)'],
[1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
]
}
});
}
}
复制代码