Chart.js使用

前言

最近项目中使用了图表，最后挑选了chart.js。因为chart.js的网上教程都是一些老版本的使用方法。所以记录一配置的过程。chart.js官网地址。

html

<div class="chart-container" style="margin-left: 50px; height:400px; width:500px">
<canvas   id="myChart" ></canvas>
</div>

限定大小，不限定的话canvas会填满最近的父元素

js

 var ctx = document.getElementById("myChart").getContext("2d");
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
        // The data for our dataset
        data: {
            labels: [1,2,3,4,5,6,7],
            datasets: [{
                backgroundColor: 'rgb(255, 255, 255)',//绘制双曲线的时候最好使用rgba,要不不透明的白色背景可以使得某些线条绘制不出来
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45],
            }]
        },
        // 配置文件
        options: {
            //标题设置
            title:{
                display:true,
                text:'每圈速度',
            },
            //禁用动画
            animation:{
              duration:0,
            },
            hover:{
                animationDuration:0,
            },
            responsiveAnimationDuration: 0,
            //提示功能
            tooltips:{
              enable:false
            },
            //顶部的文字提示
            legend:{
              display:false,
            },
            //设置x,y轴网格线显示,标题等
            scales :{
                xAxes:[{
                    //轴标题
                    scaleLabel:{
                        display:true,
                        labelString:'第几圈',
                        fontColor:'#666'
                    },
                    //网格显示
                    gridLines:{
                        display:false
                    },


                }],
                yAxes:[{
                    scaleLabel:{
                        display:true,
                        labelString:'成绩/s'
                    },
                    gridLines:{
                        display:false
                    },

                }],

            },

            //禁用赛尔曲线
            elements: {
                line: {
                    tension: 0,
                }
            }

        }
    });

ps:画x轴的时候想显示单数的数字（y轴的数据都画出来），使用ticks没有效果，有什么好的方法希望大家留言。