效果：

代码：

<!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. mysql如果主库宕机，如何解决？

    两种情况服务器down机,数据库down机 如果此时需要切从库 1.先show processlist\G,查看状态 如果看到两个状态,说明此时的从库和主库是同步的 state: waiting fo ...

  2. python 的两个模块xlwt,xlrd,写入和读取Excel数据

    http://www.cnblogs.com/fireme/p/3887284.html 这上面写的很全,不过我只需要简单的读和写的操作就ok了,下面是我写的读和写入Excel操作 读取Excel数据 ...

  3. 美国评出2016最值得去的旅游胜地+纯电动车郊游记+DIY一个小电动车

    美国评出2016最值得去的旅游胜地(10) http://bbs.miercn.com/bd/201510/thread_569397_1_10.html 自带发电机! 北汽E150 EV纯电动车郊游 ...

  4. Java全局变量

    全局变量:Java程序中,不能在所有类之外定义全局变量,只能通过在一个类中定义公用.静态的变量来实现一个全局变量.例如:ClassGlobalVar{public static global_var; ...

  5. Canvas：绘制路径

    Canvas:绘制路径 绘制路径 图形的基本元素是路径.路径是[通过不同颜色和宽度的线段或曲线相连形成的不同形状的]点的集合.一个路径,甚至一个子路径,都是闭合的. 使用路径绘制图形需要一些额外的步骤 ...

  6. POJ 2253 Frogger （Dijkstra变型)

    题意:求点1到点2的路径中,权值最大的那条边,其最小值是多少. 分析:最大值最小化.可以将迪杰斯特拉模板中的松弛操作加以修改,在O(n^2)的时间内解决该问题.其中需要注意的是,dist[i]指的是: ...

  7. jmeter 分布式集群

    Jmeter压测过程中,由于测试机配置有限,CPU.内存都可能是存在瓶颈.如果使用很大的并发进行测试时,就可能会感到程序比较卡,这时候就无法继续增加压力了. 解决方法: 搭建Jmeter分布式集群,远 ...

  8. Javascript作用域详解。

    javascript的作用域 是按照   函数来划分的. 网址:http://www.cnblogs.com/rubylouvre/archive/2009/08/21/1551270.html

  9. 安装配置资产管理软件GLPI

    GLPI是法语Gestionnaire libre de parc informatique的缩写,是一款历史悠久的资产管理软件: GLPI提供功能全面的IT资源管理接口,可以用来建立数据库全面管理I ...

  10. Luogu-3648 [APIO2014]序列分割

    Luogu-3648 [APIO2014]序列分割 题目链接 题解: 首先要发现一个重要的性质:分割的顺序是不会影响答案的 证明: 首先对于没有交的两段区间,显然先后顺序改变不会有影响 而对于在同一段 ...