文档章节

多功能图表之chartjs使用说明

邪气小生
 邪气小生
发布于 2015/12/08 09:46
字数 600
阅读 545
收藏 2

关于图表大家都知道,其中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
40
0
多功能图表之highcharts的使用说明

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

邪气小生
2015/12/23
529
0
如何用图表绘制工具实现 Y 轴的某个范围变色.有图.

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

oldfeel
2015/04/15
101
2
ChartJS 的 iOS 封装器--TWRCharts

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

叶秀兰
2014/05/08
1K
0
BI 商业智能工具 JRelax-BI 1.3 诚意更新,核心 jar 开源

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

愤怒的码农0
03/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
今天
199
6
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
今天
1
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部