Highcharts X轴留白去除

南京韶邵不说话
1,895 阅读3分钟

Highcharts X轴留白去除

首先，这个问题如果是 echarts 只要一个参数就结束了，xAxis. boundaryGap,但是 highcharts并没有这个设置，而且一直都没有，关键是，公司项目尾大不掉，深度的使用了 highcharts，一时半会是换不掉，只能用hack一点的方式，想想办法

查了很久的网络，没有啥好办法，最后实验了两个方式，都属于花活，可能会影响别的功能，但是如果真没办法，用用也未尝不可

移花接木法

  1. highcharts X轴两边的留白，在X轴的数据是纯数字的时候会变得很小，但是如果设置为 categories 就会变得很大。
  2. 利用纯数字时很小这一点，在图形宽度较小时，特别是移动端，这个间隙可以忽略
  3. 将 X轴 的 categories 抽离到配置外面，让 X轴 的数据变成纯数字
  4. 利用 X轴 的 label.formatter 将 categories 的值映射到 x轴上
  5. 同理，tooltip 也需要利用 formatter 来处理，否则展示的就是数字

将下面的代码贴进去，自己试试看

优化前

Highcharts.chart('container', {
	xAxis: {
		categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		lineWidth: 0,
		left:"-4%"
	},
	yAxis: {
		lineWidth: 1
	},
	series: [{
		data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
	}]
});

image.png

优化后

$(function () {
	let categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	$('#container').highcharts({
		xAxis: {
			labels:{
				formatter:function (){
					return categories[this.value];
				}
			}
		},
		yAxis: {
			alternateGridColor: '#FDFFD5'
		},
		series: [{
			data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
		}]
	});
});

image.png

存在的问题

  1. 由于修改了 x轴 的数据，所以在图表后续的联动，点击，选中等操作中，只能获取到 0，1，2，3，4...这些值，如果需要原始的 categories 值，需要自己转换
  2. 只是减少了留白，并不是去除了留白，所以并不完美，对于强迫症深度患者，可能治不好

X轴替身

  1. 将 X轴向左偏移 4% 会天然的消除左边的边距
  2. 这里用 4% 是个魔法数字，它是可以响应式的，各种宽度下都可以满足需求，完全贴合，非常棒棒。
  3. 贴合之后 X轴 在左侧会留下一个小尾巴，所以我们不能显示X轴，只能用背景的 grid 来冒充

将下面的代码贴进去，自己试试看

优化后

$(function () {
	$('#container').highcharts({
		xAxis: {
			categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			lineWidth: 0,
			left:"-4%"
		},
		yAxis: {
			alternateGridColor: '#FDFFD5',
			lineWidth: 1,
		},
		series: [{
			data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
		}]
	});
});

image.png

存在问题

  1. 由于 X轴 是背景grid 冒充的，所以 grid 不能去掉，如果真的有需求 grid 一定要去掉，那么只能继续整活，添加一段 css 来让 grid 只保留第一条线做为 X轴 的替身
.highcharts-yaxis-grid .highcharts-grid-line:first-child{
	stroke-width: 1px;
}
.highcharts-yaxis-grid .highcharts-grid-line {
	stroke-width: 0;
}

image.png

  1. 由于利用的是 X轴向左侧移动，所以空隙都留在了右边，导致右边的距离就变大了，这里想要去掉这个边距，就显得有些复杂了，这里提供两个思路
    1. 需要给图形套一个div，通过overflow:hidden 来遮挡一下
    2. 利用 chart 的 marginRight 负值
  2. 这两个思路都可行，但是都不是很好，应为 marginRight 不支持百分比，没有那个魔法 4%，所以偏移多少全靠手算，用 div覆盖也是一样，所以大家按照自己的情况来解决吧

最终的效果图

image.png

总结一下

  1. 技术选型要谨慎，一步错，步步错
  2. 整花活只能做为应急手段，因为你不知道你的花活最后会影响哪些功能，只有在能把控的范围内搞花活，才能安全
  3. 虽然是个小事情，网上找来找去，全是问题，没有答案，可能是 highcharts 使用不是那么多的原因吧，而且也不是开源的，源码也没的看，很难搞

最后，如果有 highcharts 的相关人员看到这个，麻烦加一个配置项吧，现在的甲方爸爸都是强迫症，我知道 categories 从 0 点开始不合逻辑，但是人家就是不想要左右边距，所以，拜托拜托了

avatar
文章
阅读
粉丝