highChart自定义y轴内容以及样式

最新推荐文章于 2021-08-05 23:06:21 发布

Jane_96

最新推荐文章于 2021-08-05 23:06:21 发布

阅读量2k

点赞数

分类专栏：不知道该放在哪里的放这里

本文链接：https://blog.csdn.net/Jane_96/article/details/85055682

版权

本文介绍如何在HighChart图表中自定义Y轴的内容和样式，包括数值格式化、添加标签、调整颜色等，以实现更个性化的数据展示效果。

摘要由CSDN通过智能技术生成

效果图如下：
在这里插入图片描述

代码：

$(function () {
	$('#container').highcharts({
		xAxis:{
			type: 'category',
			categories: ['Foo', 'Bar', 'Foobar'],
			labels : {
				formatter: function () {
					if (this.value === 'Foo') {
						let res = '<span style="color:#DD3B51">' + this.value + '</span>';
						return res;
					} else  {
						let res = '<span style="color:#40A176">' + this.value + '</span>';
						return res;
					} 
				}
			}
		},
		yAxis:{
			labels:{
				gridZIndex: 2,
				gridLineDashStyle: 'Dash',
				gridLineWidth: 0,
				lineWidth: 0,
				title: {text: ''},
				tickPositions:[-10 , -5 , 0 , 5 ,10],
				formatter: function () {
					if (this.value > 0) {