名词解释

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

canvas：只兼容到IE9

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

链接

代码实现

第三方引入

 <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>

<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】的更多相关文章

18个基于 HTML5 Canvas 开发的图表库
如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...
html5 canvas做的图表插件
用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...
基于HTML5 Canvas的线性区域图表教程
之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...
基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图效果预览实例代码 <div class="htmleaf-container"> <div ...
基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸
/** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能．在现在越来越多的手机weba ...
基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块
基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块前言最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...
一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

随机推荐

Linux环境进程间通信(一)：管道及命名管道
linux下进程间通信的几种主要手段: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...
JS简单验证密码强度
<input type="password" id="password" value=""/><button id=&qu ...
写20万数据到Excel只需9秒
on my god,写20万数据到Excel只需9秒还是菜鸟时,在某个.Net项目中,用户需要从业务系统导出Report,而数据量通常都在上万条以上,最初采用的方式就是在服务器端用NPOI生成E ...
tastypie Django REST API developement 1)
Read by linux/GNU commands Let's follow and start from here:http://django-tastypie.readthedocs.org/e ...
【详细贴】Ubuntu Linode搭建海外策略路由VPN IPSec+L2TP（一）
对于码农来说,Google上搜索,stackoverflow上提问,twitter上交流,这样的国际化开放平台才是码农成长的空间.但是,目前遇到的一些现实的困难,无可避免的带来一些麻烦,不过这难不倒我 ...
【C++自我精讲】基础系列四 static
[C++自我精讲]基础系列四 static 0 前言变量的存储类型:存储类型按变量的生存期划分,分动态存储方式和静态存储方式. 1)动态存储方式的变量,生存期为变量所在的作用域.即程序运行到此变量时 ...
oracle-计算工作日
数据库模拟表如下 operate_id operate_type operate_date process_sn 1 GD 2013-09-15 17:18:37 10001 2 JD 2013-09 ...
java基础知识拾遗(三)
1.类加载 bootstrap classloader -引导(也称为原始)类加载器,它负责加载Java的核心类. extension classloader -扩展类加载器,它负责加载JRE的扩展目 ...
C语言之算数运算符
一什么是算数运算符算术运算符: +: 就是把两个数据相加,得到和 -: 就是把两个数据相减,得到差 *: 就是把两个数据相乘,得到积 /: 就是把两个数据相除,得到商 %: 就是把两个数 ...

基于html5 canvas 的强大图表插件【Chart.js】

名词解释

链接

代码实现

其他

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

随机推荐

热门专题