您的位置：首页 > Web前端 > JavaScript
#学习笔记#(45)Chart.js曲线图

2016-02-24 17:53 288 查看
曲线图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
</head>
<body>
<canvas id="mychart1" width="600px" height="400px"></canvas>
<script src="Chart.js"></script>
<script>
var options={
//这个Boolean - If we show the scale above the chart data好像是图表数据特别多的时候起作用？？
scaleOverlay : false,
//是否使用自定义图表样式,只有当值为true时，scaleSteps/scaleStepWidth/scaleStartValue才有效
scaleOverride:false,
//图表纵轴的行数
scaleSteps:10,
//每行的宽度
scaleStepWidth:30,
//纵轴起点值
scaleStartValue:0,
//图表轴的颜色
scaleLineColor:"#696969",
//坐标轴宽度
scaleWidth:1,
//是否显示纵轴的数值
scaleShowLabels:true,
//这句并不知道有什么卵用 ：Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//坐标轴字体
scaleFontFamily:"Arial",
//坐标轴字体大小
scaleFontSize:12,
//坐标轴字体粗细,bold,normal,border,lighter或100-900
scaleFontStyle:"bold",
//坐标轴字体颜色
scaleFontColor:"#ccc",
//是否显示网格线
scaleShowGridLines:true,
//网格线颜色
scaleGridLinesColor:"#ccc",
//网格线宽度
scaleGridLineWidth:1,
//是否显示为曲线
bezierCurve:true,
//是否显示线上的点
pointDot:true,
//点半径，单位px
pointDotRadius:3,
//点的边框宽度
pointDotStrokeWidth:1,
//这个并不知道有什么卵用：Boolean - Whether to show a stroke for datasets
datasetStroke:true,
//线的宽度
datasetStrokeWidth:2,
//线和坐标轴包围的地方是否填充颜色
datasetFill:true,
//是否显示动画
animation:true,
//动画分多少步完成
animationSteps:100,
/*动画过度效果:linear,easeInQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine,easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce*/
animationEasing:"easeInOutBounce",
//动画进行中执行
//onAnimationProgress:null;//funtion(){}
//动画结束后执行
//onAnimationComplete:null;//function(){}
};
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 ctx = document.getElementById("mychart1").getContext("2d");
new Chart(ctx).Line(data,options);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航