名词解释

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. 安装mono和jexus，运行asp.net程序

    随笔- 62  文章- 1  评论- 7  raspberrypi(树莓派)上安装mono和jexus,运行asp.net程序   参考网址: http://www.linuxdot.net/ htt ...

  2. CC/G++ 学习笔记

    CC/G++ 学习笔记 本文是<An introduction to GCC>的学习笔记,记录使用GCC/G++主要的实用技巧,本文讲述的知识基本上摘自本书,附带自己的一些体验.如果想详细 ...

  3. iOS由ImageIO.framework实现gif的系统解码

    首先先简单介绍一下gif的几个算是术语吧: frame(帧):一个gif可以简单认为是多张image组成的动画,一帧就是其中一张图片image. frameCount(帧数): 就是一个gif有多少帧 ...

  4. LINQ to XML LINQ学习第一篇

    LINQ to XML LINQ学习第一篇 1.LINQ to XML类 以下的代码演示了如何使用LINQ to XML来快速创建一个xml: public static void CreateDoc ...

  5. Android While 循环导致的资源占用过高进而导致程序崩溃问题

    Timeline: Activity_launch_request time:6562004-14 15:31:25.347: I/dalvikvm(3483): Total arena pages ...

  6. TOGAF架构内容框架之内容元模型（下）

    TOGAF架构内容框架之内容元模型(下) 2.2 治理扩展(Governance Extensions) 治理扩展元模型内容 治理扩展部分的意图在于引入额外的,并且与支持运营治理的目标和业务服务相关的 ...

  7. java实现商品实时录入

    //代表各的主页面 package com.gui; import java.awt.*; import javax.swing.*; import java.awt.event.*; import ...

  8. Execl导入问题之文本转换

    前些天在基础数据的导入过程中,遇到了这样一个问题:数据明明存在,可是就是不识别!给出的错误提示是:该数据对应的外键不存在! 我找出其中的一条数据,在外键表中查询是存在的!问题出在哪里了呢? 从exec ...

  9. 人生在于折腾:php实现下载导出xx.tar.gz

    刚接到这样的需求,其实我是拒绝的.我甚至很有耐心地和pm商量,扔个csv不就好了么? pm:对方需要一个csv打包成.tar.gz的包,他们是linux server,这是硬性要求. 然后我开始折腾之 ...

  10. spring mvc下shiro的session,request等问题

    最近的一个项目使用的是spring mvc,权限框架使用的是shiro. 不过有一个问题一直困扰着我,现在的session到底是谁的session,是servlet的还是shiro的. 于是我把spr ...