新版Chart.js绘制折线图

网上的资料都是旧版的 , 遇到了一些坑

首先定义一个canvas , 如果要设置大小的话得在外面放一个div来控制大小 , 设置宽度会自动设置对应的高度 , 自己设置height无效(此处不知道怎么解决)

<div style="width: 1600px">
    <canvas id="myChart"></canvas>
</div>

添加引用

<script src="js/Chart.bundle.js"></script>
<script src="js/jquery.min.js"></script>

js代码 , 此处要在文档加载完毕时使用 , 可使用jq的$() , 也可使用window.ready

<script>
    $(function () {
        var data={
            //折线图需要为每个数据点设置一标签。这是显示在X轴上。
            labels: ["第一项","第二项","第三项","第四项","第五项"],
            //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
            datasets: [{
                label: '折线名',
                backgroundColor: "#fff", //背景填充色
                borderColor: "#36A2EB", //路径颜色
                pointBackgroundColor: "#36A2EB", //数据点颜色
                pointBorderColor: "#fff", //数据点边框颜色
                data: [81,79.2,83,93,84] //对应的值
            }]
        };
        var ctx = document.getElementById("myChart").getContext('2d');
        var myLineChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
                title: {
                    display: true,
                    text: '老罗791' //标题
                }
            }
        });

    });

</script>

效果图

新版Chart.js绘制折线图