当前位置: article > 正文

使用chart.js 制作图表_chart.js图表制作

作者：我家小花儿 | 2024-02-23 01:06:47

踩

chart.js图表制作

chart.js是一个基于HTML5的简单的面向对象的图表库，它有6 种表，分别是：曲线图、柱状图、雷达图、饼状图、极坐标区域图、以圆环图。

使用方法

Step1. 引用chart.js

<script src="js/Chart.min.js"></script>

注意：cahrt.js不依赖于jquery

Step2. 在页面中定义 canvas

<canvas id="myChart" width="400" height="400"></canvas>

Step3. 写js

曲线图：


                var ctx = document.getElementById("myChart").getContext("2d");
                var data = {
                        /// 表现在X轴上的数据，数组形式
                             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.5,59.2,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]
                         }
                     ]
                 }
                 /// 动画效果call
                 var options = {
 
                     scaleFontStyle: "normal"
 
               }
                 /// 创建对象，生成折线图表
                new Chart(ctx).Line(data,options);

注意：如果要展示在图标中的数据是从后台获得的，需要把要展示在x轴的数据和y轴的数据分别放到两个数组中,动画效果可以进行设置也可不进行设置，如果不设置所有的参数都是默认值并在最后生成图表的时候也不传定义参数的变量（就是代码中的options变量）。

效果图如下：

这个效果就是在动画效果中不设置任何参数时的效果

柱状图：

柱状图的数据格式和曲线图的数据格式相同，代码中唯一不同的就是在创建对象生成图表时，柱状图的如下：

                new Chart(ctx).Bar(data);

效果图如下：

雷达图

雷达图的数据格式和曲线图的数据格式相同，代码中唯一不同的就是在创建对象生成图表时，雷达图的如下：

                new Chart(ctx).Radar(data);

效果图如下

：

饼状图

饼状图的数据格式如下：

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

var pieData = [ { value: 30, color:"#F38630" }, { value : 50, color : "#E0E4CC" }, { value : 100, color : "#21323D" }, { value : 24, color : "#69D2E7" }, { value : 82, color : "#7D4F6D" }, { value : 58, color : "#9D9B7F" } , { value : 24, color : "#21323D" } ]//动画效果的参数是如若需要可以自行定义 new Chart(ctx).Pie(pieData);

效果图如下：

极坐标图：

极坐标图的数据结构和饼状图的数据结构相同，唯一不同的就是在创建对象生成图表的时的代码，极坐标图的如下：

new Chart(ctx).PolarArea(pieData);

效果图如下：

圆环图：

圆环图的数据结构和饼状图的数据结构相同，唯一不同的就是在创建对象生成图表的时的代码，圆环图的如下：

                new Chart(ctx).Doughnut(pieData);

效果图如下：

chart.js 参数说明：


                     //网格线是否在数据线的上面
                     scaleOverlay : false,
 
                     //是否用硬编码重写y轴网格线
                     scaleOverride : false,
 
                     //** Required if scaleOverride is true **
                     //y轴刻度的个数
                     scaleSteps : null,
 
                     //y轴每个刻度的宽度
                     scaleStepWidth : null,
 
                     // Y 轴的起始值
                     scaleStartValue : 0,
                     // 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: "#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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/132573