使用第三方图表工具——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种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...
随机推荐
- go——切片（二）
切片是一种数据结构,这种数据结构便于使用和管理数据集合. 切片是围绕动态数组的概念构建的,可以按需自动增长和缩小. 切片的动态增长是通过内置函数append来实现的.这个函数可以快速且高效地增长切片. ...
- mongodb-2.6.0 在win7 64下的安装和服务启动
转自: http://blog.csdn.net/lingchen214/article/details/24537629 1 自定义安装到C:\mongodb目录下. 2 手动在C:\mong ...
- Linux系统配置VI或VIM的技巧
Linux系统配置VI或VIM的技巧作者:IT专家网论坛出处:IT专家网论坛2008-10-28 11:08配置VI和VIM的颜色显示,使它能够高亮度显示一些特别的单词,这对编写程序很有用⋯⋯ 1.V ...
- Loadrunder场景设计篇——定时器(schedule)
A. 定义方案schedule 在 Scenario Schedule面板中,选择一个方案schedule,或通过点击New Schedule定义一个新的方案 定义schedule: a.新建sc ...
- 使用Python实现基于图像识别的iOS自动化测试
相对于Android来说,iOS比较封闭.这一点,在设计和评估自动化测试方案的时候感觉尤其强烈.iOS平台上没有特别好用的自动化测试工具.苹果针对iOS提供了UI Automation的Instrum ...
- [CTSC2011]幸福路径
题目描述 有向图 G有n个顶点 1, 2, …, n,点i 的权值为 w(i).现在有一只蚂蚁,从 给定的起点 v0出发,沿着图 G 的边爬行.开始时,它的体力为 1.每爬过一条 边,它的体力都会下降 ...
- 基于SSM的单点登陆04
jdbc.properties JDBC_DRIVER=org.mariadb.jdbc.Driver JDBC_URL=jdbc:mariadb://127.0.0.1:3306/market JD ...
- jQuery垂直缩略图相册插件 支持鼠标滑动翻页
在线演示 本地下载
- 20145219 《Java程序设计》实验三 敏捷开发与XP实践
20145219 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 敏捷开发与XP 1.敏捷开发(Agile Development)是 ...
- unbntu修改mac地址
分享下Ubuntu下更改MAC地址的简单方法: 首先把网卡设备给 down 掉,否则会报告系统忙,无法更改. sudo ifconfig eth0 down 然后修改 MAC 地址,这一步较 Wind ...