chart.js的示例地址 ：
http://www.bootcss.com/p/chart.js/docs/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线形图</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<canvas id="myChart2" width="300" height="200"></canvas>
<canvas id="myChart" width="300" height="200"></canvas>
</body>
</html>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var ctx2 = document.getElementById("myChart2").getContext("2d");
var data = {
labels : ["January","February","March","April","May","June","July"],
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]
},
{
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]
}
]
};
var data2 = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
]
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx).Bar(data,{});
var myNewChart = new Chart(ctx2).Pie(data2,{});
</script>
运行在这个位置 可以看到效果
http://jsbin.com/noyepipume/edit?html,output
运行效果：
