关于前端charts图表的封装使用

0x01 关于charts


这个图表在早期用的比较多,默认大部分比较土的都用highcharts。对于我来说,我还是比较在意美观的,so,用charts做一些图表还是有必要的~ 为了避免代码以后阅读起来费劲,还是把它封装下比较好,起码以后别人接手也好弄。。

0x02 coding


/*
 *
 * Copyright (c) 2016
 * Author: Smarttang
 * Github: https://github.com/smarttang/
 * ======
 * 用于主页面的图表展示
 */

var mycharts;

(function(){
    
    "use strict";

    mycharts = {
        draw: function(countType,ElementId,Data)
        {
            // 节点判断
            var _node = document.getElementById(ElementId);
            // 判断是否存在
            if (_node){
                var _count = document.getElementById(ElementId).getContext("2d");
                // 配置
                var _conf = {
                    scaleOverlay : false,
                    scaleOverride : false,
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: false
                    },
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    }
                };
                // 构造图形
                var _chartObj = new Chart(_count);

                // 画出
                if (countType == 'Doughnut'){
                    window.myDoughnut = _chartObj.Doughnut(Data,_conf);
                }else if (countType == 'Line'){
                    window.myLine = _chartObj.Line(Data,_conf);
                }else if (countType == 'Pie'){
                    window.myPie = _chartObj.Pie(Data,_conf);
                }
            }
        }
    }
})(jQuery);

你可能感兴趣的:(关于前端charts图表的封装使用)