bootstrap插件Chart.js使用案例-曲线图（Line chart）
发布时间：2017-11-03 编辑：小张个人博客 查看次数：47782
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>
最新文章
点击排行
- bootstrap插件Chart.js使用案例-曲线图（Line chart）
- Windows临时文件cab_x_xxxx占用磁盘空间过多的处理
- laravel5集成支付宝alipay扫码支付流程（Laravel 支付解决方案）
- Laravel5多图上传和Laravel5单图上传的功能实现
- phpqrcode生成二维码输出时出现乱码（解决方法）
- 微信小程序之wx.request网络请求与服务器配置
- Laravel5中通过SimpleQrCode扩展包生成二维码实例
- 银联支付跳转银联页面HTTP501 - httpMethod_invalid报错是什么原因？
- 在Laravel5中使用 LaravelExcel 实现Excel - CSV文件导入导出功能( PHPExcel )
- 阿里云万网虚拟主机服务器部署Laravel5.1与laravel相关配置
- Laravel支付如何使用银联进行支付(Omnipay-UnionPay)
- laravel怎么使用ajax分页（laravel异步获取数据）
友情链接
顶部
