使用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]}]}/// 动画效果callvar 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

使用chart.js 制作图表相关推荐

使用Chart.js创建图表
图表是为应用程序增加最大价值的元素或功能.具有以图形形式显示数据的功能,对于用户读取数据集的百分比非常有帮助. 使用图表有许多优点.包括能够使我们制作的应用看起来更专业.因为原本只是数字的数据看起来更 ...
使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
本文作者:Jakub Juszczak 编译:胡子大哈翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35 ...
使用Open Flash Chart(OFC)制作图表(Struts2处理)
Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表.在Web应用中可以为项目增色 ...
图表Chart.js入门教程
使用Chart.js来制作各种各样的图表.下面将为你全方位介绍chart.js.chart.js最与众不同之处是,它可以在HTML5 Canvas上面绘制出色的响应式图表. Chart.js允许你把不 ...
图表Chart js入门教程
使用Chart.js来制作各种各样的图表.下面将为你全方位介绍chart.js.chart.js最与众不同之处是,它可以在HTML5 Canvas上面绘制出色的响应式图表. Chart.js允许你把不 ...
python 图表 web_Web | Django 与 Chart.js 联用做出精美的图表
class Country(models.Model):name = models.CharField(max_length=30)class City(models.Model):name = mo ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
Chart.js入门：简介
人们通常不希望浏览大量以文本或表格形式呈现给他们的数据. 大多数情况下,这是因为它很无聊,但更重要的是,处理原始数字要困难一些. 例如,这是世界上人口最多的十个国家的表格: 国名人口中国 1,37 ...
echarts ucharts 和_使用chart和echarts制作图表
前言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕 ...

使用chart.js 制作图表

使用方法

使用chart.js 制作图表相关推荐

最新文章

热门文章