文档章节

多功能图表之chartjs使用说明

邪气小生
 邪气小生
发布于 2015/12/08 09:46
字数 600
阅读 1.6K
收藏 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
  });


© 著作权归作者所有

邪气小生
粉丝 26
博文 52
码字总数 67752
作品 0
朝阳
程序员
私信 提问
加载中

评论(0)

【干货】界面控件DevExtreme视频教程大汇总!

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

鸟栖沙岩
2016/12/07
82
0
用 ChartJS 创建动态仪表盘

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

yale8848
2013/08/19
1.6W
5
hasura graphql-engine graphql2chartjs 方便的graphql 转换chartjs 的类库

graphql2chartjs 是hasura graphql-engine 团队开源的方便graphql 转换为chartjs 的类库,我们可以方便的 用来进行ChartJS chart 开发 一张参考图 说明 我们可以集成subscription 可以快速的...

osc_ev4dw47w
2019/03/16
9
0
chartjs-plugin-datasource-prometheus 展示prometheus 数据

chartjs-plugin-datasource-prometheus 是一个chartjs 的扩展,目前比较简单,只支持line图表,但是理念上好多可以借鉴 环境准备 docker-compose 文件 promethues 配置 prometheus.yml 文件 ...

荣锋亮
05/01
0
0
多功能图表之highcharts的使用说明

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

邪气小生
2015/12/23
639
0

没有更多内容

加载失败,请刷新页面

加载更多

Python--报错RecursionError: maximum recursion depth exceeded in comparison

Python--报错RecursionError: maximum recursion depth exceeded in comparison 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本...

归子莫
34分钟前
21
0
聊聊SpinalTap的BinlogEventListener

序 本文主要研究一下SpinalTap的BinlogEventListener BinlogEventListener SpinalTap/spinaltap-mysql/src/main/java/com/airbnb/spinaltap/mysql/binlog_connector/BinaryLogConnectorSourc......

go4it
51分钟前
29
0
Spring的扩展原理

MainConfigOfExt.class /** * 扩展原理: * 1. BeanPostProcessor:bean后置处理器;bean创建对象初始化前后进行拦截工作 * BeanFactoryPostProcessor:beanFactory的后置处理器 * ...

与你同行7
今天
37
0
C# 基础知识系列- 16 开发工具篇

0. 前言 这是C# 基础知识系列的最后一个内容讲解篇,下一篇是基础知识-实战篇。这一篇主要讲解一下C#程序的结构和主要编程工具。 1. 工具 工欲善其事必先利其器,在实际动手之前我们先来看看...

月影南溪
今天
15
0
阿里双11超级工程:PB级文件分发重器蜻蜓

有图有介绍见: http://tech.it168.com/a2017/1114/3179/000003179630.shtml 蜻蜓开源地址:https://github.com/alibaba/dragonfly 2017天猫双11, 交易峰值32.5万/秒,支付峰值25.6万/秒,数...

whoisliang
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部