chart.js图表，饼状图，柱状图，折线图_chart.js 饼图显示 数值

最近项目中有用到大量的图表，所以自学下chart.js,在这里做个记录以免时间长了容易忘记。

cdn地址可以直接使用: https://cdn.bootcss.com/Chart.js/2.7.3/Chart.js   

chart.js源码：https://github.com/nnnick/Chart.js

chart.js 英文文档：http://www.chartjs.org/docs/

chart.js 中文文档：http://www.bootcss.com/p/chart.js/docs/

个人推荐博客园里大神总结的文档，感觉比官方的容易理解：https://www.cnblogs.com/landeanfen/p/5026485.html

首先引入jq和chart.js方便操作

<script src='/js/jquery-3.3.1.min.js'></script>
<script src='https://cdn.bootcss.com/Chart.js/2.7.3/Chart.js'></script>    

由于chart.js是基于HTML5的canvas，所以

<canvas id="myChart" width="800" height="600"></canvas>

项目中的饼状图:

var ctx1 = document.getElementById('myChart');
var internetType = []; //上网类型	
var onePercentage = [];  //所占百分比
var backColor1 = []	//百分比颜色
for(var i = 0; ith = data.actiontype.length, i < ith; i++){
internetType.push(data.actiontype[i].type);
onePercentage.push(data.actiontype[i].percent);				                                                                                                                    
    backColor1.push('#FF6384','#36A2EB','#FFCE96','#FFCE00','#36E2EB','#838B2E','#B2E6C3','#DCB4B8','#9FC3F7');
}
	var myChart1 = new Chart(ctx1,{
		type:'pie',
		data:{
			labels: internetType, //矩形标题
			datasets:[{
			    data: onePercentage, //所占整圆的比例
				backgroundColor:backColor1, //背景色
				hoverBackgroundColor:backColor1
			}]
		}
	});

柱状图和折线图写法基本一样只需改变type:的值；

柱状图:type:bar;

折线图:type:line;

如果需要一些别的基本的配置，可以修改默认的参数:

var options = {
    //Boolean - If we show the scale above the chart data      
    //是否显示柱状图上面的数据
    scaleOverlay: true,
 
    //Boolean - If we want to override with a hard coded scale
    scaleOverride: false,
 
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps: null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth: 50,
    //Number - The scale starting value
    scaleStartValue: null,
 
    //String - Colour of the scale line    
    //x/y轴坐标线的颜色
    scaleLineColor: "rgba(0,0,0,.1)",
 
    //Number - Pixel width of the scale line  
    //坐标线的宽度
    scaleLineWidth: null,
 
    //Boolean - Whether to show labels on the scale    
    //是否显示label值
    scaleShowLabels: true,
 
    //Interpolated JS string - can access value
    scaleLabel: "<%=value%>",
 
    //String - Scale label font declaration for the scale label
    //字体Family
    scaleFontFamily: "'Arial'",
 
    //Number - Scale label font size in pixels
    //字体大小
    scaleFontSize: 12,
 
    //String - Scale label font weight style  
    //字体样式
    scaleFontStyle: "normal",
 
    //String - Scale label font colour   
    //字体颜色
    scaleFontColor: "#666",
 
    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines: false,
 
    //String - Colour of the grid lines
    //网格线颜色
    scaleGridLineColor: "rgba(0,0,0,.05)",
 
    //Number - Width of the grid lines
    scaleGridLineWidth: 1,
 
    //Boolean - If there is a stroke on each bar    
    barShowStroke: true,
 
    //Number - Pixel width of the bar stroke    
    barStrokeWidth: 2,
 
    //Number - Spacing between each of the X value sets
    // 柱状块与x值所形成的线（如：x=20这条线）之间的距离
    barValueSpacing: 5,
 
    //Number - Spacing between data sets within X values
    // 在同一x值内的柱状块之间的间距
    barDatasetSpacing: 1,
 
    //Boolean - Whether to animate the chart
    animation: true,
 
    //Number - Number of animation steps
    animationSteps: 60,
 
    //String - Animation easing effect
    animationEasing: "easeOutQuart",
}