highcharts中多种图表类型混合在一起

很常见的一种图表就是多种类型混在一起，效果如下：

其实实现很简单：

DOM结构：

<div id="container" style="width: 500px; height: 400px;"></div>复制代码

主要是数据列中不同的数据点的类型不同：

const chart = Highcharts.chart('container', {
	series: [
		{
			name: 'xiaoming',
			type: 'column',
			stacking: 'normal',
			data: [10, 30, 40, 20, 60]
		},
		{
			name: 'xiaohong',
			type: 'column',
			stacking: 'normal',
			data: [5, 30, 80, 30, 20, 70]
		},
		{
			name: 'xiaoqiang',
			type: 'column',
			data: [5, 30, 35, 10, 30, 80]
		},
		{
			name: 'xiaonan',
			type: 'area',
			data: [11, 39, 24, 93, 50]
		},
		{
			name: 'xiaopeng',
			data: [11, 59, 224, 58, 70]
		},
		{
			name: 'xiaozi',
			type: 'scatter',
			data: [101, 200, 156, 208, 170, 210]
		}
	],
	credits: {
		enabled: false
	}
}) 复制代码

简单描述：

• 不同的数据点type属性不同
• 柱状堆叠图要求要堆叠的柱子有stacking属性，堆叠的样式为normal，可选其他样式
• 这里坐标轴公用的是一个，也没设置坐标轴标签，建议学习highcharts的时候记住一些常用的type值
• 想设置每个数据点的样式都是很简单的，到官网查看一下api即可

就那么简单，收工:)