chart.js 的基本使用

https://www.chartjs.org/   //官网

https://github.com/chartjs/Chart.js/releases/tag/v2.9.3     //下载

<canvasid="c2" width="600"height="400"></canvas>

       <scriptsrc="js/Chart.js"></script>

       <script>

              new Chart(c2, {

       type: 'bar',             //图表类型

       data: { },                //图表数据

       options: { }            //可选参数

});

       </script>
=============================实例================================

<canvas id="c14" width="600" height="400"></canvas>
<script src="js/Chart.js"></script><script>
new Chart(c14, {
    type: 'bar', //bar(柱状图)、line(曲线图)、radar(雷达)、pie(饼图)、doughnut(环形)、polarArea(极地). 图标类型
    //图标数据
    data: {
        labels:['HTML','CSS','CSS3','JS','Ajax'], //X轴下面的提示文字
        datasets: [{
            label: '对知识点掌握',  //鼠标移入上去的提示文字 + labels[i]
            data: [230,160,280,250,270],  //每个项目的数值
            backgroundColor: [ //每个项目的背景颜色
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ]
        }]
    },
    //可选参数 (无参数 默认自适应)
    options: {
        responsive: false, //禁用响应式    //  true为自适应
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true //让Y轴从0开始    //false 自动调整
                    }
            }]
        }
    }
});
</script>