使用第三方图表工具——Chart.js
效果：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>使用第三方图表工具——Chart.js</h3>
<canvas id="c10" width="500" height="400">
</canvas>
<script src="js/Chart.js"></script>
<script>
var ctx = c10.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels:['部门1','部门2','部门3','部门4','部门5'],
datasets: [{
label:'2016年各部门销售统计',
data:[350,200,500,400,380]
}]
},
options: {
responsive: false, //取消响应式
scales:{ //Y轴从0开始
yAxes:[{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
使用第三方图表工具——Chart.js的更多相关文章
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- 【重点突破】——第三方绘图工具FusionCharts.js的使用详解
一.引言 项目组中,经常会因为绘制图表的繁杂度,衡量会不会使用第三方绘图工具,如果自己做很困难,成本使用高于第三方绘图工具库,就会使用.很多人使用的是Chart.js,因为它是免费使用的,不过,缺点就 ...
- 图表工具--- ECharts.js学习（一） 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- [转]Chart.js入门教程
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...
- Chart.js入门教程
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...
- chart.js图表库案例赏析，饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
- 基于html5 canvas 的强大图表插件【Chart.js】
名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...
- Chart.js – 效果精美的 HTML5 Canvas 图表库
Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...
随机推荐
- ArcEngine开发中“错误类型"****"未定义构造函数”
from:http://blog.csdn.net/mengdong_zy/article/details/8990593 问题 在ArcEngine开发的时候,在编译时,发现出现这样的错误,出错的地 ...
- java注解1
http://computerdragon.blog.51cto.com/6235984/1210969 http://blog.csdn.net/it_man/article/details/440 ...
- OpenCL 学习step by step (5) 使用二维NDRange workgroup
http://www.cnblogs.com/mikewolf2002/archive/2012/09/07/2675634.html 在本教程中,我们使用二维NDRange来设置workgroup, ...
- 请求库之requests，selenium
requests模块 一.介绍 #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) #注意:reques ...
- 机器学习中的numpy库
日常学习中总是遇到数据需要处理等问题,这时候我们就可以借助numpy这个工具来做一些有意思的事. 1.生成随机数的几种方式 x=np.random.random(12) ###生成12 ...
- 当root用户无密码，非超级权限用户时提示mysqladmin: Can't turn off logging; error: 'Access denied; you need the SUPER privilege for this op解决方案
问题: 在centOS上安装了mysql后,卸载了又重新安装,使用mysqladmin -u root password 'new password' 更改密码,提示: mysqladmin: Can ...
- NaviCat Primium远程连接Oracle 11g数据库操作方法
说明:作者使用的系统是windows 10 64位系统,使用的软件及插件都是基于64位系统进行安装.一. 软件准备 1.windows 10 64位 操作系统 2.NaviCat Primium 11 ...
- Keras实现autoencoder
Keras使我们搭建神经网络变得异常简单,之前我们使用了Sequential来搭建LSTM:keras实现LSTM. 我们要使用Keras的functional API搭建更加灵活的网络结构,比如说本 ...
- Spring_事务-注解代码
applicationContext.xml <?xml version="1.0" encoding="UTF-8"?><beans xml ...
- 谈谈RMQ问题
没用的话:好像好久没更博了,无聊就讲讲算法吧(主要找不到水题). 感觉针对初学者,老师教这个算法时没怎么懂,最近(大概1.2个月前吧)老师又教了lca(最近公共祖先,额,可以百度,我就不讲了,可能以后 ...