使用第三方图表工具——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种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...
随机推荐
- window下rails4.1 发生TZInfo::DataSourceNotFound 错误
在官网上学习rails 4.1 ,启动rails server之后发生了如下错误 $ rails serverBooting WEBrickRails 4.1.0 application starti ...
- netty应用
http://www.blogjava.net/yongboy/archive/2013/05/13/399203.html http://shentar.me/tag/netty-2/ 代理 htt ...
- JS中的正则应用
如果还未掌握正则基础知识可先看另一篇:正则笔记-忘记就来看 创建方法: 直接量语法:/pattern/attributes 创建 RegExp 对象的语法:new RegExp(pattern, at ...
- Android bluetooth介绍
Android bluetooth介绍(一):基本概念及硬件接口Android bluetooth介绍(二): android 蓝牙代码架构及其uart 到rfcomm流程Android blueto ...
- 哆啦A梦里的某一首诗
<哆啦A梦>长篇<宇宙开拓>主题曲<放松心情>作词:武田铁矢 我终于发现, /昨日失去的一切, /虽然还无法完全意会, /可是对我却非常重要. /加紧脚步追赶, / ...
- 微信小程序：其中wxml和wxss的样式说明
微信小程序:其中wxml和wxss的样式说明 一.简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了 ...
- shell编程学习笔记之标准输入输出（read&echo）
2017-07-17 09:32:07 输入read: 用途: 从标准输入读取一行,或者从文件描述符FD(file descriptor)中读取一行,并且将其分割成字段. 用法: read [-ers ...
- C++ Primer 第二章 学习笔记
在auto一个引用时,auto会忽略顶层const,而保存底层const decltype(sum()) x = i; // I的类型就是sum()返回值的类型
- dll隐式链接延迟加载
dll隐式链接延迟加载 程序隐式链接dll后,启动程序将自动加载dll,查找路径依次是: 1:当前文件路径: 2:使用SetDLLDirectory设置的路径: 3:系统路径,system32文件夹, ...
- javascript练习题·（1）
1.参数集合是什么? (function(){ return typeof arguments; })(); 的结果是? typeOf只能以字符串的形式返回数据类型 js中包括6种数据类型--Numb ...