名词解释

Chart.js：是基于html5和canvas的强大图表插件，支持多样的图表形式，柱状线性饼环极地雷达等等；

canvas：只兼容到IE9

excanvas.js：强大的第三方兼容插件，可以使canvas兼容到IE5

链接

　　Chart.js中文网

　　Chart.js中文文档

代码实现

第三方引入

 <script src="../js/Chart.js?"></script>

    <!--[if lte IE 8]>

    <script src="../js//excanvas.js"></script>

    <script>

    Chart.defaults.global.animation = false;

    //这里主要是为<=IE8做降级处理，因为动画在IE8效果很差

    </script>

    <![endif]-->

css

<style type="text/css">

    html,body,h1,h2,h3,h4,h5,h6 {

    margin: 0;

    padding: 0;

}

.container {

    max-width: 1020px;

    margin: 0px auto;

    margin-bottom: 80px;

}

.chart-wrapper {

    background: #fff;

    padding: 15px;

    max-width: 1020px;

    margin: 0px auto 0px auto;

    box-sizing: border-box;

    overflow: auto;

        /*在手机，支持图表区域的滚动  -webkit-overflow-scrolling: touch*/

    overflow-scrolling: touch;

    -webkit-overflow-scrolling: touch;

}

h2 {

    margin: 20px 0px;

}

.chart-wrapper canvas {

    min-width: 100%;

    height: 260px;

}

.chart-title,

    .chart-wrapper + small {

    margin-left: 15px;

}

    </style>

html

 <body>

  <div class="container">

   <h2 class="chart-title">某品牌汽车销量走势</h2>

   <canvas id="sales-volume-chart"></canvas>

   <small>单位：万辆</small>

  </div>

  <div class="container">

   <h2 class="chart-title">某品牌汽车销量走势</h2>

   <canvas id="sales-volume-bar-chart"></canvas>

   <small>单位：万辆</small>

  </div>

js

<script>

    function lineChart() {

        var ctx = document.getElementById('sales-volume-chart').getContext("2d")

        var data = {

            labels: ["2014-10", "2014-11", "2014-12", "2015-1", "2015-2", "2015-3"],

            datasets: [{

                label: "",

                fillColor: "rgba(220,220,220,0.2)",

                strokeColor: "rgba(0,102,51,1)",

                pointColor: "rgba(220,220,220,1)",

                pointStrokeColor: "#339933",

                pointHighlightFill: "#339933",

                pointHighlightStroke: "rgba(220,220,220,1)",

                data: [1.27, 1.30, 1.30, 1.41, 1.04, 1.29]

            }]

        };

        // var salesVolumeChart = new Chart(ctx).Line(data);

        var salesVolumeChart = new Chart(ctx).Line(data, {

            // 小提示的圆角

            // tooltipCornerRadius: 0,

            // 折线的曲线过渡，0是直线，默认0.4是曲线

            bezierCurveTension: 0,

            // bezierCurveTension: 0.4,

            // 关闭曲线功能

            bezierCurve: false,

            // 背景表格显示

            // scaleShowGridLines : false,

            // 点击的小提示

            tooltipTemplate: "<%if (label){%><%=label%> 销量：<%}%><%= value %>万辆",

            //自定义背景小方格、y轴每个格子的单位、起始坐标

            scaleOverride: true,

            scaleSteps: 9.5,

            // scaleStepWidth: Math.ceil(Math.max.apply(null,data.datasets[0].data) / 0.1),

            scaleStepWidth: 0.05,

            scaleStartValue: 1

        });

    }

    function barChart() {

        var ctx = document.getElementById('sales-volume-bar-chart').getContext("2d")

        var data = {

            labels: ["2014-10", "2014-11", "2014-12", "2015-1", "2015-2", "2015-3"],

            datasets: [{

                label: "",

                fillColor: "rgba(153,204,153,0.5)",

                strokeColor: "rgba(0,102,51,1)",

                pointColor: "rgba(220,220,220,1)",

                pointStrokeColor: "#338033",

                pointHighlightFill: "#338033",

                pointHighlightStroke: "rgba(220,220,220,1)",

                data: [1.27, 1.30, 1.30, 1.41, 1.04, 1.29]

            }]

        };

        var salesVolumeChart = new Chart(ctx).Bar(data, {

            // 点击的小提示

            tooltipTemplate: "<%if (label){%><%=label%> 销量：<%}%><%= value %>万辆"

        });

    }

    // 启动

    setTimeout(function() {

        // 避免IE7-8 调用getContext报错，使用setTimeout

        lineChart()

        barChart()

    }, 0)

    // 在手机测试，canvas中的动画看起来很卡，性能很差

    // PC上还不错

    if (/Mobile/i.test(navigator.userAgent)) {

        //针对手机，性能做一些降级，看起来就不会那么卡了

        Chart.defaults.global.animationSteps = Chart.defaults.global.animationSteps / 6

        Chart.defaults.global.animationEasing = "linear"

    }

    </script>

其他

　　点我：博友探讨canvas VS flash Silverlight & 大牛作品

基于html5 canvas 的强大图表插件【Chart.js】的更多相关文章

  1. 18个基于 HTML5 Canvas 开发的图表库

    如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...

  2. html5 canvas做的图表插件

    用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

  3. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

  4. 基于html5 Canvas图表库 : ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

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

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

  6. 基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸

    /** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能．在现在越来越多的手机weba ...

  7. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  8. 基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

    基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...

  9. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

随机推荐

  1. 重载 C 函数

    在 clang 的扩展下,可以重载 C 函数,例如重载 sin 函数: float __attribute__((overloadable)) sin(float x) { return sinf(x ...

  2. VS2012的安装项目只能用InstallShield Limited Edition

    [吐槽]VS2012的安装项目只能用InstallShield Limited Edition[附资源下载]   以前版本的Visual Stuido中安装项目都可以使用微软自家的Visual Stu ...

  3. springMVC3学习(十二)--文件上传优化CommonsMultipartResolver

    基于上一篇文件上传发现效率很慢,我们应该对它进行优化  使用springMVC对文件上传的解析器 来处理文件上传的时候需要在spring的applicationContext里面加上springMVC ...

  4. JUC锁机制

    JUC锁机制(Lock)学习笔记,附详细源码解析 JUC锁机制(Lock)学习笔记,附详细源码解析 2013-08-22 20:03 by CM4J, 56 阅读, 0 评论,收藏, 编辑 锁机制学习 ...

  5. GC算法精解（五分钟让你彻底明白标记/清除算法）

    GC算法精解(五分钟让你彻底明白标记/清除算法) 相信不少猿友看到标题就认为LZ是标题党了,不过既然您已经被LZ忽悠进来了,那就好好的享受一顿算法大餐吧.不过LZ丑话说前面哦,这篇文章应该能让各位彻底 ...

  6. 使用 App Studio 快速定制一个你自己的专属应用

    使用 App Studio 快速定制一个你自己的专属应用 如果已有做一个手机应用的想法,只需要一些简单的图片,视频,或者RSS源,就可以通过App Studio制作出你心仪的应用! App Studi ...

  7. Java-抽象类定义构造方法

    abstract class A {  public static final String INFO="hello world";  public String name=&qu ...

  8. Jquery控制点击时一、二级菜单自由隐藏与出现

    一.基本HTML和CSS HTML中产生一.二级导航的代码: {loop $nav $key $value} <div class=”u_con”> <span class=” xg ...

  9. [置顶] 遵循Java EE标准体系的开源GIS服务平台架构

    传送门 ☞ 系统架构设计 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 传送门 ☞ GoF23种设计模式 ☞ 转载请注明 ☞ http://blog.csd ...

  10. 作为IT行业计算机从业人士，不要做“邻居盖新房,你就是背后放火的那种人”

    金华-普通人(214103872)  21:03:01 尽扯蛋   颇有点凤姐的营销方式  横瓜(601069289)  21:05:16 不服气 你搞一个下面的类似软件出来 http://www.s ...