效果：

代码：

<!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. 第一课Linux系统安装知识(1)

         在做linux下C\C++开发,首先得安装个Linux系统,这节课记录相关系统安装的知识,本文记录虚拟机安装部分.      在linux系统中,现在一般生手都用桌面版,比如比较多人使用的是 ...

  2. smarty基础原理

    smarty基础原理 一.html模板页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  3. URAL - 1902 Neo-Venice

    题目: Mars was the first planet colonized by humans. After a long terraforming process its appearance ...

  4. [CTSC2008]祭祀

    题目描述 在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组成的网络.每条河 ...

  5. Number使用笔记

    Numbe函数用于将对象转换为数字 0          0 null       0 空  0 ""         0 true      1 false     0 date ...

  6. os包方法

    os包中实现了平台无关的接口,设计向Unix风格,但是错误处理是go风格,当os包使用时,如果失败之后返回错误类型而不是错误数量． os包中函数设计方式和Unix类似,下面来看一下． func Chd ...

  7. LeetCode——Add Strings

    LeetCode--Add Strings Question Given two non-negative integers num1 and num2 represented as string, ...

  8. SPFA算法 - Bellman-ford算法的进一步优化

    2017-07-27  22:18:11 writer:pprp SPFA算法实质与Bellman-Ford算法的实质一样,每次都要去更新最短路径的估计值. 优化:只有那些在前一遍松弛中改变了距离点的 ...

  9. Java 常用正则表达式 - 转载

    只能输入数字:"^[0-9]*$".只能输入n位的数字:"^\d{n}$".只能输入至少n位的数字:"^\d{n,}$".只能输入m~n位的 ...

  10. SpringCloud之eureka服务注册和服务发现

    服务注册中心 :eureka-server 作用:服务注册中心提供服务注册功能 服务提供方:eureka-client 作用:注册服务到服务注册中心 服务注册中心 :eureka-server 创建 ...