网上的资料都是旧版的 , 遇到了一些坑
首先 定义一个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>
效果图