文档章节

多功能图表之chartjs使用说明

邪气小生
 邪气小生
发布于 2015/12/08 09:46
字数 600
阅读 548
收藏 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
用 ChartJS 创建动态仪表盘

下载源码 在线Demo 在线演示请点击这里。 今天我们将会用ChartJS来创建一个动态仪表盘。ChartJS是一个强大、无依赖的JavaScript库,通过canvas元素来创建图表。最重要的是设计人员可以自己轻...

yale8848
2013/08/19
15K
5
使用chart.js应该如何显示图例呢?

尝试使用chart.js画Web图表,但是始终无法显示图例,设置legendTemplate也不行。谁知道该如何设置呢?

F风向标F
2014/08/05
7.4K
5
ChartJS 的 iOS 封装器--TWRCharts

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

叶秀兰
2014/05/08
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Web安全之XSS攻击与防御小结

Web安全之XSS攻防 1. XSS的定义 跨站脚本攻击(Cross Site Scripting),缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从...

前端小攻略
19分钟前
1
0
JavaScript中的继承及实现代码

JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一、构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn...

peakedness丶
22分钟前
1
0
记一次面试最常见的10个Redis"刁难"问题

导读:在程序员面试过程中Redis相关的知识是常被问到的话题。作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题。十分值得一读。 Redis在...

小刀爱编程
35分钟前
13
0
TiDB Lab 诞生记 | TiDB Hackathon 优秀项目分享

本文由红凤凰粉凤凰粉红凤凰队的成员主笔,他们的项目 TiDB Lab 在本届 TiDB Hackathon 2018 中获得了二等奖。TiDB Lab 为 TiDB 培训体系增加了一个可以动态观测 TiDB / TiKV / PD 细节的动画...

TiDB
48分钟前
4
0
当区块链遇到零知识证明

本文由云+社区发表 当区块链遇到零知识证明 什么是零知识证明 零知识证明的官方定义是能够在不向验证者任何有用的信息的情况下,使验证者相信某个论断是正确的。这个定义有点抽象,下面笔者举...

腾讯云加社区
57分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部