php html5图表,Chart.js 轻量级HTML5图表绘制工具库使用步骤详解

最新推荐文章于 2021-06-21 12:02:58 发布
最新推荐文章于 2021-06-21 12:02:58 发布
阅读量142 收藏
点赞数
文章标签： php html5图表

这次给大家带来Chart.js 轻量级HTML5图表绘制工具库使用步骤详解，Chart.js 轻量级HTML5图表绘制工具库使用的注意事项有哪些，下面就是实战案例，一起来看一下。

Chart.js：用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。基于HTML5 canvas技术，Chart.js不依赖任何外部工具库，轻量级(压缩之后仅有4.5k)。值得推荐学习！

GitHub源码： https://github.com/nnnick/Chart.js

Chart.js文档：http://www.bootcss.com/p/chart.js/

步骤：

html部分：

javascript部分：引入Chart.js文件；

创建图表：实例化Chart对象(获取DOM节点取得2d context环境后实例化)；

实例化Chart对象后就继续创建具体类型的图表了；

曲线图(Line chart)：

html:

javascript:(引入及两种使用方式)

//方式一：

var ctx = document.getElementById("myChart").getContext("2d");;

var MyNewChart = new Chart(ctx).Line(data); //这种方式是只加载数据集，(缺省options)不修改默认参数(简称法一)

//数据结构(数据参数设置)

var data = {

//折线图需要为每个数据点设置一标签。这是显示在X轴上。

labels: ["January", "February", "March", "April", "May", "June", "July"],

//数据集(y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的)

datasets: [{

fillColor: "rgba(220,220,220,0.5)", //背景填充色

strokeColor: "rgba(220,220,220,1)", //路径颜色

pointColor: "rgba(220,220,220,1)", //数据点颜色

pointStrokeColor: "#fff", //数据点边框颜色

data: [10, 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, 200]

}]

};

数据结构：//数据结构(数据参数设置)

var data = {

//折线图需要为每个数据点设置一标签。这是显示在X轴上。

labels: ["January", "February", "March", "April", "May", "June", "July"],

//数据集(y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的)

datasets: [{

fillColor: "rgba(220,220,220,0.5)", //背景填充色

strokeColor: "rgba(220,220,220,1)", //路径颜色

pointColor: "rgba(220,220,220,1)", //数据点颜色

pointStrokeColor: "#fff", //数据点边框颜色

data: [10, 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, 200]

}]

};

图标参数：Line.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: "",

// 字体

scaleFontFamily: "'Arial'",

// 文字大小

scaleFontSize: 16,

// 文字样式

scaleFontStyle: "normal",

// 文字颜色

scaleFontColor: "#666",

// 是否显示网格

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*/

}

(表示刚接触Chart.js，看到这图表参数整个人都懵了，还全程英文注释，呵呵~)

理解完图表参数后，就可以自定义图表参数啦，下面来看看具体事例用法：

html部分和js文件引入部分省略：(之后的图表类型也同样省略!)

//同样数据参数设置

var data = {

//折线图需要为每个数据点设置一标签。这是显示在X轴上。

labels: ["January", "February", "March", "April", "May", "June", "July"],

//这边的thisId分别对应labels的id

thisIds : [12,22,50,44,99,3,67],

//数据集(y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的)

datasets: [{

fillColor: "rgba(220,220,220,0.5)", //背景填充色

strokeColor: "rgba(220,220,220,1)", //路径颜色

pointColor: "rgba(220,220,220,1)", //数据点颜色

pointStrokeColor: "#fff", //数据点边框颜色

data: [10, 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, 200]

}]

};

window.onload = function() {

var ctx = document.getElementById("myChart").getContext("2d");;

//方式二：传入对象字面量去修改默认图标参数，自定义图表

var MyNewChart = new Chart(ctx).Line(data, {

// 网格颜色

scaleGridLineColor: "rgba(255,0,0,1)",

// Y/X轴的颜色

scaleLineColor: "rgba(0,0,0,.1)",

// 文字大小

scaleFontSize: 16,

// 文字颜色

scaleFontColor: "#666",

// 网格颜色

scaleGridLineColor: "rgba(0,0,0,.05)",

// 是否使用贝塞尔曲线? 即:线条是否弯曲

// 是否执行动画

animation: true,

// 动画的时间

animationSteps: 60,

// 动画完成时的执行函数

onAnimationComplete: function(){

console.log("给x轴的lable对应的id：");

console.log(data.thisIds);

}

});

}

效果图：

45d06edb026cfd56ecd682ff4adf0da0.gif

柱状图：new Chart(ctx).Bar(data,options);//简记，options可缺省

数据结构：var data = {

labels : ["January","February","March","April","May","June","July"],

datasets : [

{

fillColor : "rgba(220,220,220,0.5)",

strokeColor : "rgba(220,220,220,1)",

data : [65,59,90,81,56,55,40]

},

{

fillColor : "rgba(151,187,205,0.5)",

strokeColor : "rgba(151,187,205,1)",

data : [28,48,40,19,96,27,100]

}

]

}

图标参数：Bar.defaults = {

//网格线是否在数据线的上面

scaleOverlay : false,

//是否用硬编码重写y轴网格线

scaleOverride : false,

//** Required if scaleOverride is true **

//y轴刻度的个数

scaleSteps : null,

//y轴每个刻度的宽度

scaleStepWidth : null,

//Y轴起始值

scaleStartValue: null,

// Y/X轴的颜色

scaleLineColor: "rgba(0,0,0,.1)",

// X,Y轴的宽度

scaleLineWidth: 1,

// 刻度是否显示标签, 即Y轴上是否显示文字

scaleShowLabels: false,

// Y轴上的刻度,即文字

scaleLabel: "",

// 字体

scaleFontFamily: "'Arial'",

// 文字大小

scaleFontSize: 12,

// 文字样式

scaleFontStyle: "normal",

// 文字颜色

scaleFontColor: "#666",

// 是否显示网格

scaleShowGridLines: true,

// 网格颜色

scaleGridLineColor: "rgba(0,0,0,.05)",

// 网格宽度

scaleGridLineWidth: 1,

//Bar Chart图表特定参数：

//是否绘制柱状条的边框

barShowStroke : true,

//柱状条边框的宽度

barStrokeWidth : 2,

//柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)

barValueSpacing :5,

//每组柱状条组中柱状条之间的间距

barDatasetSpacing :5,

// 是否显示提示

showTooltips: true,

// 是否执行动画

animation: true,

// 动画的时间

animationSteps: 60,

// 动画的特效

animationEasing: "easeOutQuart",

// 动画完成时的执行函数

onAnimationComplete: null

}

部分javascript实例var barChart = new Chart(ctx).Bar(data, {

scaleLabel: "$"+"",

//是否绘制柱状条的边框

barShowStroke: true,

//柱状条边框的宽度

barStrokeWidth: 2,

//柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)

barValueSpacing: 5,

//每组柱状条组中柱状条之间的间距

barDatasetSpacing: 5,

});

效果图：

558b5cdc2a3ec353da0665191693854a.gif

饼图：

javascript:new Chart(ctx).Pie(data,options);

数据结构：var data=[

{

value:40,

color:"#21F0EA",//背景色

highlight:"#79E8E5",//高亮背景颜色

label:'javascript'//文字标签

},{

value:60,

color:"#E0E4CC",

highlight:"#EAEDD8",

label:'jquery'

},{

value:100,

color:"#69D2E7",

highlight:"#83E5F7",

label:'html'

}

];

图标参数：Pie.defaults = {

//是否显示每段行程(即扇形区，不为true则无法看到后面设置的边框颜色)

segmentShowStroke : true,

//设置每段行程的边框颜色

segmentStrokeColor : "red",

//心啊是每段扇区边框的宽度

segmentStrokeWidth :2,

//Boolean - 是否执行动画

animation : true,

//Number - 动画时间

animationSteps : 100,

//String - 动画的效果

animationEasing : "easeOutBounce",

//Boolean -是否旋转动画

animateRotate : true,

//Boolean - 是否动画缩放饼图中心(效果不错)

animateScale : true,

//Function - 火动画完成时执行的函数

onAnimationComplete : null

}

部分javascript实例：var ctx=document.getElementById("pieChart").getContext("2d");

window.pieChart=new Chart(ctx).Pie(data,{

//是否显示每段行程(即扇形区，不为true则无法看到后面设置的边框颜色)

segmentShowStroke : true,

//设置每段行程的边框颜色

segmentStrokeColor : "red",

//每段扇区边框的宽度

segmentStrokeWidth :2,

//Boolean - 是否执行动画

animation : true,

//Number - 动画时间

animationSteps : 100,

//String - 动画的效果

animationEasing : "easeOutBounce",

//Boolean -是否旋转动画

animateRotate : true,

//Boolean - 是否动画缩放饼图中心(效果不错)

animateScale : true,

//Function - 动画完成时执行的函数

//onAnimationComplete : null

});

效果图：

4547593cfc83832ea48cdce8c726f8ee.gif

环形图：

javascript:new Chart(ctx).Doughnut(data,options);

数据结构：//数据结构(与饼图相似)

var data = [{

value: 30,

color: "#F7464A",

highlight: "#FA7C7C",

label: "angularJS"

}, {

value: 50,

color: "#E2EAE9",

highlight: "#F2F5F5",

label: "juqery"

}, {

value: 100,

color: "#D4CCC5",

hightlight: "#DBD6D1",

label: "javascript"

}, {

value: 40,

color: "#949FB1",

highlight: "#AFBCCE",

label: "nodeJS"

}, {

value: 120,

color: "#4D5360",

highlight: "#767C86",

label: "html"

}];

图标参数：Doughnut.defaults={

//是否显示每段行程(即环形区，不为true则无法看到后面设置的边框颜色)

segmentShowStroke: true,

//设置每段行程的边框颜色

segmentStrokeColor: "#fff",

//设置每段环形的边框宽度

segmentStrokeWidth: 2,

//图标中心剪切圆的比例(0为饼图，接近100则环形宽度越小)

percentageInnerCutout: 50,

//是否执行动画

animation: true,

//执行动画时间

animationSteps: 100,

//动画特效

animationEasing: "easeOutBounce",

//是否旋转动画

animateRotate: true,

//是否缩放图表中心

animateScale: true,

//动画完成时的回调函数

// onAnimationComplete: null

}

效果图：

8c9ddc7d974b73437abdbcc8cd5210ee.gif

Chart.js总共有六大图表：除此之外，还有剩下两种：雷达图或蛛网图、极地区域图，读者请自行参考：Chart.js中文文档

那么，问题来了！？图表的图例怎么办？这货在应用中也是很常用的！经过多次的查阅，找到以下方法实现图例部分，膜拜一下各路大神先！除此之外，还可以动画完成后将各组数据自动显示，而不用手动查看各组数据！

直接上各部分代码：

html部分：

柱状图

css部分：(不设置基础样式的话，可能看不出预期的效果)

ul,li{

list-style-type:none;;

}

ul>li{

margin:5px auto;

font-family: "微软雅黑";

}

span{

display: inline-block;

width:20px;height:20px;line-height: 20px;

vertical-align:middle;

margin-right:5px;

}

javascript部分：window.onload = function() {

var ctx = document.getElementById("barChart").getContext("2d");

var barChart = new Chart(ctx).Bar(data, {

showTooltips: false, // 是否显示提示,这里需要设置为false

//模板

legendTemplate:

'

  • -legend\">'+

''+

'

\">'+

'

'+

''+

'

',

onAnimationComplete: function() {//动画完成后显示对应的数据

var ctx = this.chart.ctx;

ctx.font = this.scale.font;

ctx.fillStyle = this.scale.textColor;

ctx.textAlign = 'center';

ctx.textBaseline = 'bottom';

this.datasets.forEach(function(dataset) {

dataset.bars.forEach(function(bar) {

ctx.fillText(bar.value, bar.x, bar.y);

});

});

}

});

var legend = document.getElementById('legend');

// 图例

legend.innerHTML = barChart.generateLegend();

}

//数据结构：

var data = {

labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],

datasets: [{

fillColor: "rgba(220,220,220,0.5)",

strokeColor: "rgba(220,220,220,1)",

data: [65, 59, 90, 81, 56, 55, 40],

label: "本月销售额"//图例标签

},{

fillColor: "#69D2E7",

strokeColor: "#B2E5ED",

data: [54, 99, 72, 61, 86, 65, 84],

label: "本季度销售额"

}]

};

效果图：

0c9b97a593852ee506362b8a4922d93f.gif

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

马克先生Markk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 折线图
08-08
html5 折线图 可获取坐标 canvas 新特性
html js 扇形统计图_Chart.js 轻量级HTML5图表绘制工具库（知识整理）
weixin_39610678的博客
12-22 494
Chart.js：用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。基于HTML5 canvas技术，Chart.js不依赖任何外部工具库，轻量级(压缩之后仅有4.5k)。值得推荐学习！步骤：html部分：javascript部分：引入Chart.js文件；创建图表：实例化Chart对象(获取DOM节点取得2d context环境后实例化)...
php chart.js,Chart.js在Laravel项目中的应用示例
weixin_29458415的博客
03-26 147
介绍Chart.js是一个HTML5图表库，使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等， 本文将介绍如何在laravel项目中使用chart.js安装可以通过以下命令在 npm 或 bower 中来安装chart.js。npm install chart.js --savebower install chart.js --save可以在你的项目中使用...
利用 html5 canvas 简单绘制折线图
继续去踢波的专栏
04-29 9755
利用 html5 canvas 简单绘制折线图
web 前端绘制折线_html5绘制折线图
weixin_35697229的博客
01-17 826
html5绘制折线图详细代码(function (){window.addEventListener("load", function(){var data = [100,-1000,0,700];// 获取上下文var a_canvas = document.getElementById('a_canvas');var context = a_canvas.getContext("2d");//...
Chart.js 轻量级HTML5图表绘制工具库（知识整理）
12-29
基于HTML5 canvas技术，Chart.js不依赖任何外部工具库，轻量级（压缩之后仅有4.5k）。值得推荐学习！ GitHub源码： https://github.com/nnnick/Chart.js Chart.js文档：http://www.bootcss.com/p/chart.js/ 步骤： ...
详解Chart.js轻量级图表库的使用经验
10-18
主要介绍了详解Chart.js轻量级图表库的使用经验，Chart.js很容易上手，只需要在页面中引用脚本文件，并创建 <canvas> 节点即可渲染出图表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于html5的Chart.js图表js库
08-17
基于html5的Chart.js图表，包含许多例子，可以直接拷贝使用
html5绘制折线图
weixin_30307921的博客
03-25 440
html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="700"></canvas> <script> (function (){ window.addEventListener("load", fun...
php html5折线图,10个经典实用的HTML5图表动画应用
weixin_29958569的博客
03-19 306
本文作者html5tricks，转载请注明出处今天我们要来分享另外一种类型的1、超酷HTML5 Canvas图表应用Chart.js之前我们已经为大家分享过很多HTML5图表应用了，每一个HTML5图表都非常实用。今天我们要介绍一款基于HTML5 Canvas的图表应用Chart.js，它的功能非常强大，有很多图表类型，包括折线图、柱状图、饼图、放射图等，你可以下载并将它们应用到自己的项目中。2、...
js绘制图形（扇形，折状图，柱状图）
01-09
js绘制图形（扇形，折状图，柱状图），例子，js包，很全
HTML5基于SVG技术实现动画效果的折线图.rar
07-10
HTML5基于SVG技术实现动画效果的折线图，并且还具有渐变色效果，用chrome打开本特效后，会看到拆线图以动画效果绘制，很像以前那种Flash效果的曲线图。使用HTML5技术可很好的就实现此种效果，且可跨平台（PC和智能手机）运行。
ChartJS-PHP:在PHP中使用Chart.js的适配器
05-14
适用于PHP的Chart.js 是的一个很棒的库，它使您可以轻松地向项目中添加丰富的可视化图形。 但是，由于它是一个JS库，因此在PHP中使用它可能会有些乏味。 您可以根据需要拥有任意数量的图表。 生成的JS代码具有名称空间，因此不会与其他Chart.js实例中的代码冲突。 在这里更改为PHP的Chart.js 。 它与Chart.js 1.x完全兼容（即将在2.x中更新）。 开始使用 克隆此存储库，并将src文件夹的内容放在PHP项目中的任何位置。 将文件include在您PHP项目中。 将chart.min.js放置在项目中的任何位置。 将其放入要显示图表的页面中： < script src =" path/to/chart.min.js " > </ script > 如何使用它 创建一个线图 要创建折线图，您需要两个数组：一个数组包含图表的标签（x轴），另一个数组包含数据
html5+css3 统计图 条形 折线
07-17
使用 html5 和 css3 实现的数据统计图，包含条形图和折线图
44种动态/静态统计图（折线图）大集合基于html5 CSS3
12-03
44种统计图，什么网站统计，数据统计，动态折线图，静态图，饼状图，柱状图应有尽有，没有你想不到，只有你没看过的，基于html5，CSS3等技术，下载一次，受用一辈子！
html5 canvas 实现折线图
u012986736的博客
10-17 2361
效果图： 此效果难点：y轴是倒着走的。 其它思想与上一篇进度条的基本一样htm代码： <!DOCTYPE Html> <html> <head> <title>Line Chart Demo</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> <
php chart.js,Chart.js轻量级图表库使用案例解析
weixin_29184075的博客
03-26 298
这次给大家带来Chart.js轻量级图表库使用案例解析，Chart.js轻量级图表库使用的注意事项有哪些，下面就是实战案例，一起来看一下。前言最近项目中遇到一个在页面中画图表的需求，需要一个扇状图和一个柱状图，虽然能使用svg或canvas绘制，但吃力还不一定讨好，所以研究接入了主流的第三方图表库供项目使用。下面主要记录我使用过程中的一些体验和解决方法，具体教程请移步官方文档。技术选型研究了Hig...
chart.js轻量级图表插件使用
weixin_30684743的博客
07-09 168
安装下载 下载地址：https://github.com/chartjs/Chart.js/releases/latest cdn LINK：https://cdnjs.com/libraries/Chart.js 文档：https://www.chartjs.org/docs/latest/ Chart.js有两种不同的版本。常规版本的Chart.js和Chart.min.j...
html5svg制作折线图,9款基于HTML5/SVG/Canvas的折线图表应用
weixin_42132056的博客
06-21 948
9款基于HTML5/SVG/Canvas的折线图表应用利用HTML5制作精美而实用的折线图表比较简单,此外我们还可以使用功能强大的SVG和Canvas动画特性，今天我们来分享9款基于HTML5/SVG/Canvas的折线图表应用。2014/05/141、华丽的HTML5图表 可展示实时数据HTML5在图表应用中也十分广泛，比起以前的网页图表，HTML5图表制作更便捷，功能更强大。这款HTML5图表...
html2canvas图表没有,html2canvas Chart.js图表​​未呈现
最新发布
05-23
如果您使用的是`html2canvas`库来转换包含`Chart.js`图表的HTML元素为图像，可能会出现该问题。这是因为`html2canvas`无法识别`canvas`元素中的图表数据。 为了解决这个问题，您可以使用`chartjs-node-canvas`库，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值