数据可视化--Chart.js使用总结
概述
Chart.js是一个HTML5图表库使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中，还包含了大量的自定义选项，包括动画展示形式
##中文官网
http://chartjs.cn/
##官网
https://www.chartjs.org/
##GitHub网址
https://github.com/chartjs/Chart.js
##使用版本
- v2.9.3
使用步骤
(推荐)在Github下载chart.js.zip压缩包引用在script中（Chart.bundle.js）
hello wrlod
##编写第一个hello world图表
<script>
//当所有代码装载在浏览器才会运行
(function(){
'use strict';
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx,{//第一个参数ctx，
options:{
title:{
display:true,//是否显示
text:"hello world",//文本
fontColor:"red",//字体颜色
fontSize:'23'//字体大小
}
}
})
})()
</script>
曲线图
type 图表属性：用来表现用什么类型图的：曲线，柱状，饼状等（改变type就可以改变一定图表样式）
[‘line’,‘bar’, ‘radar’, ‘polarArea’, ‘doughnut’, ‘pie’, ‘bubble’]
// An highlighted block
var type = 'line';//将type值为line，会呈现曲线
data数据属性：定义数据量
datasets:[
{
label:'优酷',//数据名称
data:[100,200,300,400,100],//数据
borderColor : 'blue'//线条颜色
},
{
label:'b站',
data:[1000,2000,3000,4000,10000],
borderColor : 'pink'
}
]
完整代码（曲线图）
<!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项目1</title>
</head>
<style>
canvas{
border: 1px solid black;
}
</style>
<body>
<canvas width="800px" height="500px">
</canvas>
</body>
<script src="chart.js/Chart.bundle.js"></script>
<script>
(function(){
//严格模式
'use strict';
//写数据
var type = 'line';
var data = {
labels:[2004,2005,2006,2007,2008],//横坐标系
datasets:[
{
label:'优酷',//数据名称
data:[100,200,300,400,100],//数据
borderColor : 'blue'
},
{
label:'b站',
data:[1000,2000,3000,4000,10000],
borderColor : 'pink'
}
]
}
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx,{
type:type,
data:data,
})
})();
</script>
</html>