bootstrap插件Chart.js使用案例-曲线图(Line chart)
发布时间:2017-11-03 编辑:小张个人博客 查看次数:52420
Chart.js简介
Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中,还包含了大量的自定义选项,包括动画展示形式。 Chart.js比较轻量,且不依赖其他库。
Chart.js官方网址:http://www.chartjs.org/
Chart.js官方文档:http://www.chartjs.org/docs/latest/
Chart.js下载地址:https://github.com/chartjs/Chart.js
引入Chart.js文件
首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量。
<script src="./Chart.js"></script>
Chart.js-创建图表
为了创建图表,我们要实例化一个Chart对象。为了完成前面的步骤,首先需要需要传入一个绘制图表的2d context。以下是案例。
<canvas id="canvas" height="300" width="950"></canvas>
Chart.js-数据结构
var lineChartData = { labels : ["Mongodb","jquery","Laravel5","bootstrap","vue.js","Html5","CSS3","php","Linux","MySQL"], 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,140,29,15,25] }, { 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,127,100,36,52,34] } ] }
Chart.js-图表参数
var defaults = { //网格线是否在数据线的上面 scaleOverlay : false, //是否用硬编码重写y轴网格线 scaleOverride : false, //** Required if scaleOverride is true ** //y轴刻度的个数 scaleSteps : null, //y轴每个刻度的宽度 scaleStepWidth : 20, // Y 轴的起始值 scaleStartValue : null, // Y/X轴的颜色 scaleLineColor: "rgba(0,0,0,.1)", // X,Y轴的宽度 scaleLineWidth: 1, // 刻度是否显示标签, 即Y轴上是否显示文字 scaleShowLabels: true, // Y轴上的刻度,即文字 scaleLabel: "<%=value%>", // 字体 scaleFontFamily: "'Arial'", // 文字大小 scaleFontSize: 16, // 文字样式 scaleFontStyle: "normal", // 文字颜色 scaleFontColor: "#009966", // 是否显示网格 scaleShowGridLines: true, // 网格颜色 scaleGridLineColor: "rgba(0,0,0,.05)", // 网格宽度 scaleGridLineWidth:2, // 是否使用贝塞尔曲线? 即:线条是否弯曲 bezierCurve: true, // 是否显示点数 pointDot: true, // 圆点的大小 pointDotRadius:5, // 圆点的笔触宽度, 即:圆点外层白色大小 pointDotStrokeWidth: 2, // 数据集行程(连线路径) datasetStroke: true, // 线条的宽度, 即:数据集 datasetStrokeWidth: 2, // 是否填充数据集 datasetFill: true, // 是否执行动画 animation: true, // 动画的时间 animationSteps: 60, // 动画的特效 animationEasing: "easeOutQuart", // 动画完成时的执行函数 //onAnimationComplete: null }
当我们完成了在指定的canvas上实例化Chart对象之后,Chart.js会自动针对retina屏幕做缩放。
Chart对象设置完成后,我们就可以继续创建Chart.js中提供的具体类型的图表了。下面这个案例中,我们将展示如何绘制一幅曲线图(Line chart)。
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,defaults);
完整代码
<!doctype html> <html> <head> <title>Chart.js-拆线图</title> <script src="./Chart1.js"></script> <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> <meta charset="UTF-8"> </head> <body> <canvas id="canvas" height="300" width="950"></canvas> <script> var lineChartData = { labels : ["Mongodb","jquery","Laravel","bootstrap","vue.js","Html5","CSS3","php","Linux","MySQL"], 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,140,29,15,25] }, { 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,127,100,36,52,34] } ] } var defaults = { //网格线是否在数据线的上面 scaleOverlay : false, //是否用硬编码重写y轴网格线 scaleOverride : false, //** Required if scaleOverride is true ** //y轴刻度的个数 scaleSteps : null, //y轴每个刻度的宽度 scaleStepWidth : 20, // Y 轴的起始值 scaleStartValue : null, // Y/X轴的颜色 scaleLineColor: "rgba(0,0,0,.1)", // X,Y轴的宽度 scaleLineWidth: 1, // 刻度是否显示标签, 即Y轴上是否显示文字 scaleShowLabels: true, // Y轴上的刻度,即文字 scaleLabel: "<%=value%>", // 字体 scaleFontFamily: "'Arial'", // 文字大小 scaleFontSize: 16, // 文字样式 scaleFontStyle: "normal", // 文字颜色 scaleFontColor: "#009966", // 是否显示网格 scaleShowGridLines: true, // 网格颜色 scaleGridLineColor: "rgba(0,0,0,.05)", // 网格宽度 scaleGridLineWidth:2, // 是否使用贝塞尔曲线? 即:线条是否弯曲 bezierCurve: true, // 是否显示点数 pointDot: true, // 圆点的大小 pointDotRadius:5, // 圆点的笔触宽度, 即:圆点外层白色大小 pointDotStrokeWidth: 2, // 数据集行程(连线路径) datasetStroke: true, // 线条的宽度, 即:数据集 datasetStrokeWidth: 2, // 是否填充数据集 datasetFill: true, // 是否执行动画 animation: true, // 动画的时间 animationSteps: 60, // 动画的特效 animationEasing: "easeOutQuart", // 动画完成时的执行函数 //onAnimationComplete: null } var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,defaults); </script>
Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1
联系方式:[email protected] | 本站文章仅供学习和参考