名词解释

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. E-mail Composition and Decoding

    一.邮件涉及协议及本文说明1. 协议 SMTP(Simple Mail Transfer Protocal) 简单邮件传输协议,用于发送邮件. MIME(Mutipurpose Internet Ma ...

  2. ssdt_hook NtOpenProcess

        获取ssdt表中所有函数的地址 for (int i = 0; i < KeServiceDescriptorTable->NumberOfServices; i++) {     ...

  3. urllib 源码小剖

    urllib 源码小剖 urllib 是 python 内置的网络爬虫模块,如果熟悉 python 一定能很快上手使用 urllib. 写这篇文章的目的是因为用到了它,但因为用的次数较多,又或者是具体 ...

  4. C#跨窗体调用控件（委托回调函数使用例子）

    问题: 有两个窗体,FORM1(含一个label控件,一个名为显示form2的button控件)和FORM2(含一个button控件).启动时,FORM1中点击button控件显示form2使FORM ...

  5. 关于Symfony2+nginx搭建过程总结

    关于Symfony2+nginx搭建过程总结 最近在试着用nginx+symfony搭建公司的网站,由于nginx不支持pathinfo模式,所以必须修改nginx(我使用的是nginx1.5.1)的 ...

  6. struts2对ognl表达式的使用（配图解加讲解）

    ognl它是一个功能强大的表达式语言,用来获取和设置Java对象的属性,它旨在提供一个更高的更抽象的层次来对Java对象图进行导航. 先看一张示意图 如果是下面的除了第一种valueStack的下面几 ...

  7. javaPNS进阶-高级推送技巧

    1 创建 payloads javaPNS提供了很多简单易用的通知方式(Push类里的alert,badges,sounds等)这些让你不用自己处理payload.但是我们的程序可能需要复杂的推送信息 ...

  8. ON COMMIT PRESERVE ROWS

    定义声明式全局临时表的每个会话拥有自己的独特的临时表描述.当会话终止时,表行和临时表描述均会被删除. 有如下选项,可控制commit后临时表的状态: ON COMMIT DELETE ROWS:在执行 ...

  9. 给你的git仓库瘦身

    很久没有写博客了,最近遇到了一个git问题,比较典型,记录下来与大家分享. 我们使用git版本控制的时候享受了很多便利,不管是代码合并,分支提供给我们的并发,但我们也往往忽略了每次提交之后在我们本地项 ...

  10. [APUE]进程控制(中)

    一.wait和waitpid函数 当一个进程正常或异常终止时会向父进程发送SIGCHLD信号.对于这种信号系统默认会忽略.调用wait/waidpid的进程可能会: 阻塞(如果其子进程都还在运行); ...