Chart.js绘图,折线图、柱状图

出处:http://jingyan.baidu.com/article/5d368d1ef536d43f60c0579f.html?st=2&os=0&bd_page_type=1&net_type=2


中文手册:http://www.bootcss.com/p/chart.js/docs/


Chart.js绘图,折线图、柱状图



先来看看我们即将要做的折线图、柱状图:

566d0fdfa9ec8a131372f5e9f203918fa0ecc014


b110e6198618367a89e2ddd42b738bd4b31ce515



下面,给出HTML、CSS等代码:

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta http-equiv="pragma" content="no-cache" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0" />

    <meta content="telephone=no,email=no" name="format-detection" />

    <title>Chart Demo</title>

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

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

    <!--[if lte IE 8]>

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

    <script>

    Chart.defaults.global.animation = false;

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

    </script>

    <![endif]-->

</head>


<body>

    <div class="container">

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

        <div class="chart-wrapper">

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

        </div>

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

    </div>


    <div class="container">

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

        <div class="chart-wrapper">

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

        </div>

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

    </div>

</body>



下面是核心的javascript代码:

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


附录:

其中用到的软件:

Chart.js框架,版本1.0.2,一个简单、轻量级的绘图框架,基于HTML5 canvas。这个框架能很多种图,折线图、柱状图、玫瑰图等。

excanvas.js,这是一个专门解决canvas IE兼容问题的框架。因为IE9已经支持canvas,所有<=IE8引入这个库就可以了。


这两个库在Github上都有,如图:

f9589818367adab471a49e4a8ed4b31c8701e400



兼容性:

因为引入了excanvas.js ,所以,兼容到IE7+,

其他的chrome、android、iOS等浏览器,都是可以兼容的。  

页面加入了一些web app的meta,所以对手机的兼容也是不错的:

f99dcf00baa1cd119880ff29bc12c8fcc3ce2d42


手机访问截图(手机型号:Smartisan T1 白色,Android):

图表在手机上可以用手指拖动。

8bc3a7014a90f603507c164e3c12b31bb151eda8


f7426d8da977391295ed0f68fd198618377ae2b5



 经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。


你可能感兴趣的:(html5,H5,图表控件,chart.js)