名词解释

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. [RM 状态机详解2] RMAppAttempt状态机详解

    摘要 本文详细描述RMAppAttempt状态机内的状态与其转换关系,分析的代码基于Apache社区Hadoop最新的2.3.0版本. RMAppAttempt状态机 在RM中,一个RMApp可能对于 ...

  2. linux网络编程(一)

    一.概念介绍 网络程序分为服务端程序和客户端程序.服务端即提供服务的一方,客户端为请求服务的一方.但实际情况是有些程序的客户端.服务器端角色不是这么明显,即互为客户端和服务端. 我们编写网络程序时,一 ...

  3. WCF/WPF公司内部订餐程序开发

    WCF/WPF公司内部订餐程序开发 (服务端篇) 上班的第一天,群里讨论关于订餐的问题,所以想到了要不要自己开发一个公司内部的订餐系统呢?方便公司内部员工的订餐,有了想法就简单的实践了下 . 实现还是 ...

  4. js 上传下载(留着备用)

      js 上传下载(留着备用) 下载文件 1. <a href="#" onClick="download()">下载文件</a>  & ...

  5. CF 192 DIV.2

    总结一下这场比赛,就是我太SB了.说多了都是泪. A,大水题. B,根据题意,可以肯定有一个城市是可以与所有城市相连的,直接找到该点然后输出该点与其他所有点相连即可. int x[111111] , ...

  6. IOS设计模式学习（6）生成器

    1 前言 有时候,构建某些对象有多种不同方式.如果这些逻辑包含在构建这些对象的类中的单一方法中,构建的逻辑会非常荒唐(例如,针对各种构建需求的一大片嵌套if-else或者switch-case语句). ...

  7. java ArrayList的序列化分析

    一.绪论 所谓的JAVA序列化与反序列化,序列化就是将JAVA 对象以一种的形式保持,比如存放到硬盘,或是用于传输.反序列化是序列化的一个逆过程. JAVA规定被序列化的对象必须实现java.io.S ...

  8. 结构-行为-样式-JqueryUI拖放使用实例（全）

    最近工作中有个需要是动态配置页面,想到之前公司有做过类似的,用的是JqueryUi,所以就看了下它的Api.下面就是我做的小Demo,想用的同学可以参考: Html: <div class=&q ...

  9. Server Tomcat v6.0 at localhost was unable to start within 45 seconds

    在eclipse里启动tomcat的时候出现以下的错误: Server Tomcat v6.0 at localhost was unable to start within 45 seconds. ...

  10. SpringAOP导致@Autowired依赖注入失败

    之前用springAOP做了个操作日志记录,这次在往其他类上使用的时候,service一直注入失败,找了网上好多内容,发现大家都有类似的情况出现,但是又和自己的情况不太符合.后来总结自己的情况发现:方 ...