文档章节

多功能图表之chartjs使用说明

邪气小生
 邪气小生
发布于 2015/12/08 09:46
字数 600
阅读 543
收藏 2
点赞 0
评论 0

关于图表大家都知道,其中ChartJs就是其中一个非常简单实用的图表库,对于数据的展现都具有很好的封装性,而且外观的样式也具有很强大的可定制

手机上的截图这里就不上传了,太麻烦了

还有些别的图表的样式,这里我就不一一列举了,总之,对于一般的图表的样式,以及数据的展示,基本chartJs都能够满足
对于charJs的使用,也是非常的简单的
首先第一步,我们需要到官网去下载chartJS库,引入到我们的工程中
其次当然是开始创建图表,这里的创建图表也是非常的简单,与HighCharts创建图表的方式不同,chartJS是通过canvas绘画出来的,所以这里的动画效果要比HighCharts好一些

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

在JavaScript中

//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

下面就是我们根据不同的需求绘制不同的图表了
比如这里我们绘制一个极地区域图

new Chart(ctx).PolarArea(data,options);

这些都说完,当然就该讨论讨论这个数据如何添加的问题了,chartJs可以绘画曲线图、柱状图、雷达图、极地区域图,饼图、环形图等一些图案,其实其数据的摆放都大同小异。
这里拿我们最常用的柱状图举例子吧
上代码

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]
		}
	]
}

New对象:

new Chart(ctx).Bar(data,options);

其中fillColor就是填充的颜色,strokeColor是边框的颜色
Labels就是x轴上的字段,其中datasets就是给x轴上的位置填充数据的

其实chartJs如果没有什么特别的需求还是非常推荐使用的,简单实用,下面看下一个完整的代码:

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
  labels : ["January","February","March","April","May","June","July"],
  datasets : [
    {
      fillColor : "rgba(220,220,220,0.5)",//填充的颜色
      strokeColor : "#dddddd",//边框的颜色
      highlightFill: "rgba(220,220,220,0.75)",
      highlightStroke: "rgba(220,220,220,1)",
      data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
    },
    {
      fillColor : "rgba(151,187,205,0.5)",
      strokeColor : "rgba(151,187,205,0.8)",
      highlightFill : "rgba(151,187,205,0.75)",
      highlightStroke : "rgba(151,187,205,1)",
      data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
    }
  ]
};
  var ctx = document.getElementById("canvas0").getContext("2d");
  new Chart(ctx).Bar(barChartData, {
    responsive : true
  });


© 著作权归作者所有

共有 人打赏支持
邪气小生
粉丝 14
博文 52
码字总数 67752
作品 0
朝阳
程序员
【干货】界面控件DevExtreme视频教程大汇总!

DevExtreme是一款为移动开发者精心准备的,跨平台开发的HTML5/JS框架,可以构建iOS、Android、Tizen和Windows Phone 8应用程序,是Visual Studio开发人员开发跨平台移动产品的优选工具。本文...

鸟栖沙岩 ⋅ 2016/12/07 ⋅ 0

多功能图表之highcharts的使用说明

highCharts可以说是一款知名度非常高的图表库,目前的highCharts可以支持直线图,曲线图,饼图等近18中图表 这两天也有机会接触highCharts中几款常用的图表 放图: 当然这里展示的混合是的图...

邪气小生 ⋅ 2015/12/23 ⋅ 0

如何用图表绘制工具实现 Y 轴的某个范围变色.有图.

我想用图表绘制工具展示儿童的身高变化, X 轴表示时间, Y 轴表示身高,中间的绿色部分表示正常身高范围,请问用 chartjs 或者 echarts 可以实现这种效果吗?

oldfeel ⋅ 2015/04/15 ⋅ 2

cssplot - CSS 绘制图表

cssplot是一个无依赖、纯CSS,响应式设计的可绘制图表元素的CSS. 使用 在HTML中引入cssplot.css文件 在需要绘制图表的标签中使用属性 demo 效果 目前cssplot支持绘制柱状图、和散点图。相比较...

Lanz ⋅ 2014/10/24 ⋅ 0

ChartJS 的 iOS 封装器--TWRCharts

TWRCharts 是 ChartJS 的 iOS 封装器,方便利用本机的 Obj-C 代码构建动态的图表。

叶秀兰 ⋅ 2014/05/08 ⋅ 0

BI 商业智能工具 JRelax-BI 1.3 诚意更新,核心 jar 开源

距离上一次更新有很长一段时间了,一直有小伙伴质疑开源的诚意,说核心 jar 没有开源。并不是不愿意开源,而是对当时的代码质量不满意。 在经过一段时间的努力后,终于达到心里的期望。现在将...

愤怒的码农0 ⋅ 03/22 ⋅ 0

Chart.js 2.4 发布,易用的 JavaScript 图表库

Chart.js 2.4 发布了,ChartJS 是使用 HTML5 Canvas 元素的 Javascript 图形库,支持6种统计图形,不依赖其他库。 部分更新内容: 新功能 公开自定义工具提示的数据点信息 新的工具提示和悬停交...

王练 ⋅ 2016/11/15 ⋅ 5

BI 商业智能 - JRelax-BI

继上一个软件#zframe#已经有很长时间了,这次基于zframe的底层,改头换面(更换前端所有UI) 发布一个全新的工具:《JRelax-BI B/S版商业智能工具》 目前处于研发阶段,版本号为:1.3 更新时...

愤怒的码农0 ⋅ 2016/12/09 ⋅ 23

简洁AngularJS框架后台管理系统bootstrap后台模板

最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版。 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版。 Minovate是 AngularJS 高级管理系统模板。...

VIP_web ⋅ 2017/01/12 ⋅ 0

5个最好的开源Javascript图表库

  在这篇文章中,我向大家介绍前5名最好的开源JavaScript图表库。每个站点的仪表板都是不完整的,因为他们缺少图表,所以为我们的站点找到正确的图表库是非常重要的。以下库可以帮助你在站...

webstack前端栈 ⋅ 2017/12/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 42分钟前 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

前言 我是上学期学的汇编,因为有vs又不想用课上教的麻烦的dosbox以及masm32,但是一直没找到高亮插件和能调试的(难在运行不了而找不到答案上,出现的错误在最后放出,还请先达们不吝指点)...

simpower ⋅ 52分钟前 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 55分钟前 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 今天 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 今天 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 今天 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 今天 ⋅ 0

Java对象的序列化与反序列化

Java对象的序列化与反序列化

Cobbage ⋅ 今天 ⋅ 0

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 今天 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部