学习chart.js 库（图表的重要性 L01）图标是软件开发中最常用的一种展示手段，特别是现如今的web游览中，比重

图标是软件开发中最常用的一种展示手段，特别是现如今的web游览中，比重很高。

引入chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

需要一个容器

<div class="container">
    <canvas id="myChart"></canvas>
</div>

let myChart = document.getElementById('myChart').getContext('2d');

// 实例化chart对象
let chart = new Chart(myChart, { // 容器， 对象
    type: 'bar',
    data: {
        labels: ['北京', '上海', '广州', '厦门', '杭州', '成都'],
        datasets: [
            { label: '工作热度', data:['884', '5645', '1356', '528','9835', '12354' ] }
        ]
    }
});

具体的代码可以看下面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>chart.js 的使用</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>

    <div class="container">
        <canvas id="myChart"></canvas>
    </div>
    

    <script>
    	let myChart = document.getElementById('myChart').getContext('2d');

        // 配置全局默认信息
		Chart.defaults.global.defaultFontFamily = 'Lato';
		Chart.defaults.global.defaultFontSize = 18;
		Chart.defaults.global.defaultFontColor = '#777';

    	// 实例化chart对象
    	let chart = new Chart(myChart, { // 容器， 对象
    		type: 'radar', // pie ,bar , line radar, polar
    		data: {
    			labels: ['北京', '上海', '广州', '厦门', '杭州', '成都'],
    			datasets: [{ 
    				label: '工作热度', // 标签
    				data:['884', '5645', '1356', '528','9835', '12354' ] , // 数据
    				backgroundColor: ['red','blue','green','gray','yellow','purple'], // 颜色
    				borderWidth: 1,
    				borderColor: '#777',
    				hoverBorderColor: '#000'

    			}]
    		},
    		options: {
    			title: {
    				display: true,
    				text: '中国各大城市工作热度',
    				fontSize: '25'
    			},
    			legend: {
    				display: true,
    				position: 'right',
    				labels: {
    					fontColor: '#000'
    				}
    			},
    			layout: {
    				padding: {
    					left: 50 ,right: 0,bottom: 0, top: 0
    				}
    			},
    			tooltips: {
					enabled: true // 显示图内的提示
				}
    		}
    	});


    </script>
</body>
</html>

学习chart.js 库 （图表的重要性 L01）

学习chart.js 库（图表的重要性 L01）