Chart.js 一款簡單干凈的圖表工具，基於html5 的Javascript。
可以用來制做條形，扇形，折線，混合等等的強大工具
圖表要放在html 的 cancas 標簽中
<canvas> 標簽定義圖形，比如圖表和其他圖像。
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
制作sin cos 折線圖
准備一個盒子用來放這個圖
引入chart.js，
鏈接：https://pan.baidu.com/s/1HSU1O6R-aczin5XrfoDpnA
提取碼：72mx
也可以在 https://www.chartjs.org/ 學習使用
具體實現
sin 與 cos 有個順口留
123，321，39 二十七，弦是2 ，切是3 ，分子根號不能刪
js 代碼：
重要：
不同的圖形對應着不同的類型，通過type:'中間的參數來進行控制'
line 表示折線統計圖，bar 表示條形統計圖，pie 表示扇形統計圖
主要就是設置 X 軸的參數
設置線對應的值，以及對線的格式進行設置
可以看到制作好后
代碼，拷貝后可以直接進行使用查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>折線圖</title>
<script src="http://www.obge.top/js/chartjs/2.8.0/chart.min.js">
</script>
</head>
<body>
<!-- 寬度為600px 並且居中盒子 -->
<div style="width: 600px;margin: 0px auto">
<!--在畫布上做圖表-->
<canvas id="myChart">
</canvas>
</div>
<script>
//獲取 id 為 myChart 這個對象 的 2d上下文
var chartjs = document.getElementById('myChart').getContext('2d');
//基於 chartjs Chart對象傳遞參數
var myChart = new Chart(chartjs,{
//type:"line" 表示一個線性圖表。如果要是柱狀圖，將line 換成 bar
type : 'line',
//data 表示提供要顯示的數據
data:{
//labels 表示圖表 X 軸下方的文字
labels:['0','π/2','π','3π/2','2π','5π/2'],
//datasets 表示數據集合。這里數據集合里只有一個數據，如果是多個數據在圖表中就會顯示多條線
datasets:[{
//lable 表示這組數據的名稱
label:'sin圖',
//data 具體數據 對應在Y 軸的位置
data:[0,1,0,-1,0,1],
//borderColor線條顏色
borderColor:'red',
//borderWidth 線條寬度
borderWidth:1,
//borderDash: [5，5] 用於表示虛線。 [5，5] 分別表示虛線的長度和距離。
borderDash:[5,5],
// fill: false 不進行填充 折線包括的部分使用陰影
fill:false,
},
//多條線依次增加
{
label:"cos圖",
data:[1,0,-1,0,1,0],
borderColor:"blue",
borderWidth:1,
fill:true,
}
]
},
//options 其他選項
options:{
//tooltips 鼠標移動到圖標的時候提示信息
tooltips:{
//intersect: false 鼠標不放在數據點的時候，也會提示信息
intersect:false,
// model 顯示模式
mode:'index'
}
}
});
</script>
</body>
</html>