您的位置：首页 > Web前端 > JavaScript

chart.js制作折线图

2015-11-04 15:40 573 查看

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="Chart.js-master/Chart.min.js"></script>
<body>
<div class="canvasWrapper">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
<script>
var data = {
labels : ["January","February","March","April","May","June","July","444"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40,99]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100,0]
}
]

}

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Line(data);

</script>
</html>

View Code
http://pan.baidu.com/s/1hqwbBZu

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航