数据可视化清新版【chart.js】学习笔记11.0—混合图表

混合图表类型

使用Chart.js，可以创建混合图表，这些图表是两个或多个不同图表类型的组合。常见的是一个柱形图和一个折线图进行联动混合，创建混合图表始于基本图表的初始化。

样例

代码

let ctx = document.getElementById(“myChart9”);
let myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
		datasets: [{//柱状图
			label: '# of Votes',
			type: 'bar',
			data: [12, 19, 16, 5, 2,10],
            backgroundColor: 'rgb(0,179,235)',
            borderColor: 'rgb(0,179,235)',
			borderWidth: 1,
			order:2,//第二渲染
		},
		{//折线图
			label: '# of Votes',
			fill:false,
			type: 'line',
			lineTension:0,
			data: [12, 19, 16, 5, 2,10],
            backgroundColor: 'rgb(77,74,235)',
            borderColor: 'rgb(77,74,235)',
			borderWidth: 2,
			order:1,//第一渲染
		}],
	},
	options: {
		scales: {
			yAxes: [{
				ticks: {
					beginAtZero: true
				}
			}]
		}
	}
});

图纸顺序

order为数据集的绘制顺序。也影响堆叠顺序，工具提示和图例。默认情况下，数据集被绘制，因此第一个是最高的。可以通过指定order数据集的选项来更改。order默认为0。

数据可视化清新版【chart.js】学习笔记

01.数据可视化清新版【chart.js】学习笔记1.0—介绍
02.数据可视化清新版【chart.js】学习笔记2.0—项目引入
03.数据可视化清新版【chart.js】学习笔记3.0—折线图（Line）
04.数据可视化清新版【chart.js】学习笔记4.0—柱状图(Bar)
05.数据可视化清新版【chart.js】学习笔记5.0—雷达图(Radar)
06.数据可视化清新版【chart.js】学习笔记6.0—饼图(Pie)
07.数据可视化清新版【chart.js】学习笔记7.0—环形图(Doughnut )
08.数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
09.数据可视化清新版【chart.js】学习笔记9.0—气泡图(Bubble Chart)
10.数据可视化清新版【chart.js】学习笔记10.0—离散图(Scatter Chart)
11.数据可视化清新版【chart.js】学习笔记11.0—混合图表
12.数据可视化清新版【chart.js】学习笔记12.0—面积图表
13.数据可视化清新版【chart.js】学习笔记13.0—图表配置
14.数据可视化清新版【chart.js】学习笔记14.0—数据更新