19.9.30chart.js

var config = {
			type: 'line',       
			data: {
				labels: labelsArray ,
				datasets: [{
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.red ,
					borderColor: window.chartColors.red,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[0]          
				  },
				  {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.blue ,
					borderColor: window.chartColors.blue,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[1]          
				  },
				  {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.yellow ,
					borderColor: window.chartColors.yellow,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[2]          
				  },
				  {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.purple ,
					borderColor: window.chartColors.purple,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[3]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.green ,
					borderColor: window.chartColors.green,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[4]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.grey ,
					borderColor: window.chartColors.grey,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[5]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.red ,
					borderColor: window.chartColors.red,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[6]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.blue ,
					borderColor: window.chartColors.blue,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[7]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.yellow ,
					borderColor: window.chartColors.yellow,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[8]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.purple ,
					borderColor: window.chartColors.purple,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[9]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.red ,
					borderColor: window.chartColors.red,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[10]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.grey ,
					borderColor: window.chartColors.grey,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[11]          
				  },
				   {
					fill: false,
					borderWidth:1, 
					backgroundColor:window.chartColors.green ,
					borderColor: window.chartColors.green,                     
					pointRadius : 0,       
					pointHoverRadius : 0,   
					data:result[12]          
				}],			
			},
		
			options: {
				responsive: true,
				title:{
					display: true,
					text: Base.FrequencyTable
				},
				animation : {
					duration: 0,
				},
				events:["mouseover"],	
				onHover:null,  
				elements: {
					line: {
						tension: 0, 
					}
				},
				tooltips : {
					enabled : false
				},
				legend : {
					display:false
				},
				scales: {
					xAxes:[{
						display: true,                         
						gridLines:{
							display:true
						},
						scaleLabel: {
							display: true,
							labelString: Base.FrequencyPoint                  
						},
						ticks:{
							//autoSkip:false,
							autoSkipPadding:0,
							maxTicksLimit:4
						}
					}],
					yAxes: [{               
						gridLines: {
							drawBorder: true,
							//color: 'gray'                                        
						},
						ticks: {
							beginAtZero:false,
							//stepSize:30000
						},
						scaleLabel: {
							display: true,
							labelString: Base.FrequencyLv                 
						}
					}]
				}
			}
		};
		
	  var ctx = document.getElementById("gFreq_1").getContext("2d");
	  window.myLine = new Chart(ctx,config) 

function split_array(arr, len)
{   
	var a_len = arr.length;    
	var result = [];   
	for(var i=0;i<a_len;i+=len)
	{ 
		result.push(arr.slice(i,i+len)); 
	}   
	return result;
}
//把一个数组分隔成定长的几个数组

基于canvas的绘图

config里面是type:图的类型  data:数据和颜色  option:自适应 标题 动画 事件 横纵坐标轴

如果使用最新版本的Chart.js，请参照国外官网的文档。 
截止到2017年4月，当前最新版本是2.5。 
Chart.js 官网：http://www.chartjs.org

国内教程对应的版本是chart.js v1.0，如果使用2.0以上的版本是不能使用的。 
国内教程：http://www.bootcss.com/p/chart.js/docs/