效果：

代码：

<!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的更多相关文章

  1. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  2. 【重点突破】——第三方绘图工具FusionCharts.js的使用详解

    一.引言 项目组中,经常会因为绘制图表的繁杂度,衡量会不会使用第三方绘图工具,如果自己做很困难,成本使用高于第三方绘图工具库,就会使用.很多人使用的是Chart.js,因为它是免费使用的,不过,缺点就 ...

  3. 图表工具--- ECharts.js学习（一） 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  4. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  5. [转]Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  6. Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  7. chart.js图表库案例赏析，饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  8. 基于html5 canvas 的强大图表插件【Chart.js】

    名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...

  9. Chart.js – 效果精美的 HTML5 Canvas 图表库

    Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...

随机推荐

  1. maven项目打WAR包记录

    打了个war包,各种不顺,也是以前没打过的原因,眼高手低了…… cmd 进入项目目录 打开 运行----cmd 进入命令窗口 键入 cd 回车 输入E\:mars\cdc 键入 mvn clean p ...

  2. 关于线程安全Dictionary

      使用Dictionary时, 是线程不安全的(). 会出现以下的问题, 导致IIS挂掉: 其实DicMapper是不为NUL的, DicMapper["aaasdfasdfasdfzxc ...

  3. Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) E. Tree Folding

    地址:http://codeforces.com/contest/765/problem/E 题目: E. Tree Folding time limit per test 2 seconds mem ...

  4. Python3：读取配置dbconfig.ini（含有中文）显示乱码的解决方法

    Python3:读取配置dbconfig.ini(含有中文)显示乱码的解决方法 一.原因 Python 3 中虽有encoding 参数,但是对于有BOM(如Windows下用记事本指定为utf-8) ...

  5. quartz(2) -- 入门案例

    第一步:添加jar,maven配置 <!-- quartz --> <dependency> <groupId>org.quartz-scheduler</g ...

  6. hdu1596 find the safest road - floyd

    2017-08-04 14:42:56 writer:pprp 题意: Problem Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每 ...

  7. Django之ModelForm详解

    前言 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来.先来一个简单的例子来看一下这个东西怎么用: 比如我们的数据库中有这样一张学生表,字段有姓名,年龄,爱 ...

  8. Spark- 使用第三方依赖解析IP地址

    使用 github上已有的开源项目1)git clone https://github.com/wzhe06/ipdatabase.git 2)编译下载的项目: mvn clean package- ...

  9. Object有哪些方法？

    有9个方法 1 clone 2 toString() 3 getClass 4 finalize 5 equals 6 hascode 7 notify 8 notifall 9 wait

  10. Android报错Type Error executing aapt: Return code -1 - HTTP 500

    我的做法是(乱蒙对的) 把menu.xml干掉!,对的你没看错! 当然其他人方案:如下 1.http://stackoverflow.com/questions/10699439/aapt-filin ...