Highcharts 数据可视化 常用图表

Highcharts 各类图表展示

1、 正常曲线图

chartOptions: {
	chart: {
		zoomType: "x", // x轴可伸缩
		height: 268
	},
	
	xAxis: {
		type: "datetime", // 以日期格式展示
		showLastLabel: true,
		lineColor: '#F8F8F8',
		tickColor: '#F8F8F8',
		plotBands: {
			// 标示区 
			from: 1399305600000,
			to: 1395072000000,
 			color: "rgba(47, 183, 0, .2)",
			zIndex: 5
		},
		// min: start_date,
		// max: end_date,
		// breaks: [{ // 使中间断掉的部分不出现缝隙
			// from: ,
			// to: ,
			// breakSize: 0 // 不断 连上
		// }],
	},
	
	yAxis: {
		title: {
			text: "" // 设置text为空才不显示y轴title
		},
		gridLineColor: '#F8F8F8',
		labels: {
			// format: "{value:,.2f}" // 保留两位小数
			formatter: function() { // 百分比显示
				return `${(this.value * 100).toFixed(2)}%`;
			}
		}
	},

	series: [
		{
			type: "area", // 数据展示为区域
			fillColor: { // 数据列填充色，下面的为渐变色
				linearGradient: {
					x1: 0,
					y1: 0,
					x2: 0,
					y2: 1
				},
				stops: [
					[0, "#D0DDF8"],
					[1, "#fff"]
				]
			},
			name: "***",
			color: "#0065AA",
			data: [],
			showInLegend: false // 不在图例中展示该项
		},{
			name: "创建",
			color: "rgba(0,0,0,0)",
			data: [
				[1374422400000, 0.8650571646865418]
			],
			marker: {
				fillColor: '#FFB24B',
				enabled: true,
				symbol: "circle",
				radius: 4
			} // 设置数据点的样式，也可以让图例中该项以圆形展示
		},{
			type: "boxplot",  // 这个type就可以让图例为圆形
			name: "****",
			data: []
		},{
			type: "line",
			name: "****",
			dashStyle: "Dash",  // 数据线以虚线形式展示
			data: []
		}
	],
	annotations: [{ // 标注 可以在某个数据点上标注具体信息
		labelOptions: {
			borderColor: '#FFB24B',
			backgroundColor: '#FFB24B',
			padding: 4,
			borderRadius: 6,
			style: {
				color: '#fff'
			},
			y: -13
		},
		labels: [{
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 1374422400000,
				y: 0.8650571646865418
			},
			text: '创建'
		}]
	}],
	
	title: {
		text: ""
	},
	
	loading: { 
		// 加载中选项配置
		labelStyle: {
			color: "#5EABF2",
			fontSize: "12px"
		}
	},
	
	boost: {
		// 性能提升模块
		useGPUTranslations: true,
		usePreAllocated: true
	},
	
	credits: {
		enabled: false //不显示LOGO
	},
	
	noData: {
		style: {
			fontSize: "15px",
			color: "#303030"
		}
	},
	
	legend: {
		enabled: false // 禁用图例
	},
		
	tooltip: {  // 提示框相关配置
		shared: true,
		crosshairs: true,  // 瞄准线
		valueDecimals: 4,  // 保留4位小数
		split: true, // 分区显示
		pointFormatter() { // 百分位显示 自定义展示
			return `<span style="color:${this.series.color}">\u25CF</span> ${this.series.name}: <b>${(this.y * 100).toFixed(2)}%</b><br/>`;
		},
		xDateFormat: "%Y-%m-%d %H:%M",  // 设置时间显示格式
	},
	
	plotOptions: {
		series: {
			animation: false, // 动画加载
			lineWidth: 1, // 线条宽度
			marker: {
				enabled: false,
				radius: 1
			},
			events: {
				legendItemClick: function(e) {
					return false; // 直接 return false 即可禁用图例点击事件
				}
			}
		},
		line: {
			dataLabels: {
				// 开启数据标签
				enabled: true
			},
			// 关闭鼠标跟踪，对应的提示框、点击事件会失效
			enableMouseTracking: false	
		}
	},
}

dashStyle: “Dash” 虚线展示
type: “boxplot” 该类型图例为圆形

2、饼状图

略

3、柱状图

做过的就是坐标轴title的位置

chartOptions: {
	yAxis: { // 自定义y轴标题位置
		title: {
			text: "净资产<br>(亿元)",
			align: "low",
			rotation: 0,
			offset: -25,
			x: -60,
			y: 20
		},
		labels: {
			format: "{value:,.2f}"
		}
	},
}

4、雷达图

chartOptions: {
	chart: {
		width: 320,
		height: 320,
		polar: true  // 代表为雷达图
	},
	pane: {
		size: "60%"  // 可以设置内部图表的大小
	},
	xAxis: {
		categories: ['哈哈','嘻嘻','呵呵','呼呼'],  // 雷达图数据列
		tickmarkPlacement: "on",
		gridLineColor: "#EEEEEE",
		lineWidth: 0,
		labels: {
			formatter: function() {  // 自定义文字内容
				return `${this.value}能力<br/>${_this.radarData[this.value]}分`
			},
			style: {  // 自定义label字体样式
				color: '#4D4D4D',
				fontSize: '14px',
				fontFamily: 'Lato-BoldItalic',
				textAlign: 'center'
			}
		}
	},
	 yAxis: {
	 	labels: {
	 		enabled: false
	 	},
	 	gridLineColor: "#EEEEEE",
	 	gridLineInterpolation: "polygon",  // 必须
	 	min: 0,  // 定义最小值
	 	max: 100  // 定义最大值Ï
	 },
	 series: [{
	 	name: "综合评分",
	 	type: "area",
	 	data: [80, 90, 60, 98],
	 	pointPlacement: "on",
	 	color: { // 颜色填充，此为渐变色
	 		linearGradient: {
	 			x1: 0,
	 			x2: 0,
	 			y1: 0,
	 			y2: 1
	 		},
	 		stops: [
	 			[0, 'rgba(166, 234, 255, 0.37)'],
	 			[1, 'rgba(166, 234, 255, 0.37)']
	 		]
	 	},
	 	marker: {
	 		fillColor: 'rgba(0, 195, 255, .5)',
	 		lineColor: 'rgba(0, 195, 255, .5)'
	 	}
	 }],
	 tooltip: {
	 	formatter: function() {  // 自定义提示框展示内容
	 		return '该基金经理能力' + this.x + '为' + (this.y);
	 	}
	 },
}

5、九宫格？heatmap（不知道叫什么图）

chartOptions: {
	chart: {
		type: "heatmap",
		height: 200,
		width: 200
	},
	title: {
		text: null
	},
	xAxis: {
		categories: ["价值型", "平衡型", "成长型"]
	},
	yAxis: {
		categories: ["小盘", "中盘", "大盘"],
		title: null
	},
	colorAxis: {
		minColor: "#FFFFFF",
		maxColor: "#46BBDE"
	},
	series: [{
		borderWidth: 1,
		borderColor: "#46BBDE",
		data: [[0, 0, 0],[0, 1, 0],[0, 2, 0],[1, 0, 0],[1, 1, 0],[1, 2, 1],[2, 0, 0],[2, 1, 0],[2, 2, 0]]
	}],
	plotOptions: {
		heatmap: {
			states: {
				hover: {
					enabled: false // 不可点击
				}
			}
		}
	},
}

等等等等 很多未用到的…

附上highcharts官网链接，仔细研究，什么都会有的

highcharts官网实例
highcharts官方api文档