HTML5数据图表绘制工具库Chart.js

HTML5数据图表绘制工具库Chart.js

大数据时代,我们周围到处都是数据,很多工作毫不夸张的说,其实就是在处理数据。程序员的开发工
1
  • 详情内容
  • 留言点评

大数据时代,我们周围到处都是数据,很多工作毫不夸张的说,其实就是在处理数据。程序员的开发工作就是做增删查改的过程,那都是在折腾数据。数据的可视化非常重要,自己、客户和系统访客,都需要更直观地观察数据。那么网页开发时,究竟该如何把数据可视化呢?

使用一个简单的js插件,分分钟搞定!Chart.js:用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上。基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩后仅4.5k)。

应用步骤:

首先写上html画布标签:

<canvas id="myChart" width="400" height="400"></canvas>

然后引入Chart.js文件:

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

最后设置好数据参数即可,数据图本身无需样式支持。以下是几种典型应用实例代码:

曲线图(Line chart)实例:

<canvas id="myChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script type="text/javascript">
            //同样数据参数设置
            var data = {
                //折线图需要为每个数据点设置一标签。这是显示在X轴上。
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                //这边的thisId分别对应labels的id
                 thisIds : [12,22,50,44,99,3,67],
                //数据集(y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的)
                datasets: [{
                    fillColor: "rgba(220,220,220,0.5)", //背景填充色
                    strokeColor: "rgba(220,220,220,1)", //路径颜色
                    pointColor: "rgba(220,220,220,1)", //数据点颜色
                    pointStrokeColor: "#fff", //数据点边框颜色
                    data: [10, 59, 90, 81, 56, 55, 40] //对象数据
                }, {
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    data: [28, 48, 40, 19, 96, 27, 200]
                }]
            };
        window.onload = function() {
                    var ctx = document.getElementById("myChart").getContext("2d");;
                    //方式二:传入对象字面量去修改默认图标参数,自定义图表
                    var MyNewChart = new Chart(ctx).Line(data, {
                        // 网格颜色
                    scaleGridLineColor: "rgba(255,0,0,1)",
                        // Y/X轴的颜色
                        scaleLineColor: "rgba(0,0,0,.1)",
                        // 文字大小
                        scaleFontSize: 16,
                        // 文字颜色
                        scaleFontColor: "#666",
                        // 网格颜色
                        scaleGridLineColor: "rgba(0,0,0,.05)",
                        // 是否使用贝塞尔曲线? 即:线条是否弯曲
                        // 是否执行动画
                        animation: true,
                        // 动画的时间
                        animationSteps: 60,
                        // 动画完成时的执行函数
                        onAnimationComplete: function(){
                            console.log("给x轴的lable对应的id:");
                            console.log(data.thisIds);
                        }
                    });
                }
</script>

曲线图可自定义构图参数:

 Line.defaults = {
                //网格线是否在数据线的上面
                scaleOverlay : false,
                //是否用硬编码重写y轴网格线
                scaleOverride : false,
                //** Required if scaleOverride is true **
                //y轴刻度的个数
                scaleSteps : null,
                //y轴每个刻度的宽度
                scaleStepWidth : 20,
                // Y 轴的起始值
                scaleStartValue : null,
                // Y/X轴的颜色
                scaleLineColor: "rgba(0,0,0,.1)",   
                // X,Y轴的宽度
                scaleLineWidth: 1,
                // 刻度是否显示标签, 即Y轴上是否显示文字
                scaleShowLabels: true,
                // Y轴上的刻度,即文字
                scaleLabel: "<%=value%>",
                // 字体
                scaleFontFamily: "'Arial'",
                // 文字大小
                scaleFontSize: 16,
                // 文字样式
                scaleFontStyle: "normal",
                // 文字颜色
                scaleFontColor: "#666",
                // 是否显示网格
                scaleShowGridLines: true,
                // 网格颜色
                scaleGridLineColor: "rgba(0,0,0,.05)",
                // 网格宽度
                scaleGridLineWidth:2,
                // 是否使用贝塞尔曲线? 即:线条是否弯曲
                bezierCurve: true,
                // 是否显示点数
                pointDot: true,
                // 圆点的大小
                pointDotRadius:5,
                // 圆点的笔触宽度, 即:圆点外层白色大小
                pointDotStrokeWidth: 2,
                // 数据集行程(连线路径)
                datasetStroke: true,
                // 线条的宽度, 即:数据集
                datasetStrokeWidth: 2,
                // 是否填充数据集
                datasetFill: true,
                // 是否执行动画
                animation: true,
                // 动画的时间
                animationSteps: 60,
                // 动画的特效
                animationEasing: "easeOutQuart",
                // 动画完成时的执行函数
                /*onAnimationComplete: null*/
 }

柱状图实例:

<canvas id="myChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script type="text/javascript">
var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            data : [28,48,40,19,96,27,100]
        }
    ]
}
window.onload = function() {
    var ctx = document.getElementById("myChart").getContext("2d");;
	var barChart = new Chart(ctx).Bar(data, {
        scaleLabel: "$"+"<%=value%>",
        //是否绘制柱状条的边框
        barShowStroke: true,
        //柱状条边框的宽度
        barStrokeWidth: 2,
        //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果,请控制合理数值)
        barValueSpacing: 5,
        //每组柱状条组中柱状条之间的间距
        barDatasetSpacing: 5,
    });
}
</script>

柱状图可自定义构图参数:

Bar.defaults = {
                //网格线是否在数据线的上面
                scaleOverlay : false,
                //是否用硬编码重写y轴网格线
                scaleOverride : false,
                //** Required if scaleOverride is true **
                //y轴刻度的个数
                scaleSteps : null,
                //y轴每个刻度的宽度
                scaleStepWidth : null, 
                //Y轴起始值
                scaleStartValue: null,
                // Y/X轴的颜色
                scaleLineColor: "rgba(0,0,0,.1)",
                 // X,Y轴的宽度
                scaleLineWidth: 1,
                // 刻度是否显示标签, 即Y轴上是否显示文字
                scaleShowLabels: false,
                // Y轴上的刻度,即文字
                scaleLabel: "<%=value%>",
                // 字体
                scaleFontFamily: "'Arial'",
                 // 文字大小
                scaleFontSize: 12,
                // 文字样式
                scaleFontStyle: "normal",
                // 文字颜色 
                scaleFontColor: "#666",
                // 是否显示网格
                scaleShowGridLines: true,
                // 网格颜色
                scaleGridLineColor: "rgba(0,0,0,.05)",
                // 网格宽度
                scaleGridLineWidth: 1,
                //Bar Chart图表特定参数:
                //是否绘制柱状条的边框
                barShowStroke : true,
                //柱状条边框的宽度
                barStrokeWidth : 2,
                //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果,请控制合理数值)
                barValueSpacing :5,
                //每组柱状条组中柱状条之间的间距
                barDatasetSpacing :5,
                // 是否显示提示
                showTooltips: true, 
                // 是否执行动画
                animation: true,
                // 动画的时间
                animationSteps: 60,
                // 动画的特效
                animationEasing: "easeOutQuart",
                // 动画完成时的执行函数
                onAnimationComplete: null
}

饼图实例:

<canvas id="myChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script type="text/javascript">
var data=[{
        value:40,
        color:"#21F0EA",//背景色
        highlight:"#79E8E5",//高亮背景颜色
        label:'javascript'//文字标签
    },{
        value:60,
        color:"#E0E4CC",
        highlight:"#EAEDD8",
        label:'jquery'
    },{
        value:100,
        color:"#69D2E7",
        highlight:"#83E5F7",
        label:'html'
    }
];
window.onload = function() {
	var ctx=document.getElementById("myChart").getContext("2d");
	window.pieChart=new Chart(ctx).Pie(data,{
	    //是否显示每段行程(即扇形区,不为true则无法看到后面设置的边框颜色)
	    segmentShowStroke : true,
	    //设置每段行程的边框颜色
	    segmentStrokeColor : "red",
	    //每段扇区边框的宽度
	    segmentStrokeWidth :2,
	    //Boolean - 是否执行动画
	    animation : true,
	    //Number - 动画时间
	    animationSteps : 100,
	    //String - 动画的效果
	    animationEasing : "easeOutBounce",
	    //Boolean -是否旋转动画
	    animateRotate : true,
	    //Boolean - 是否动画缩放饼图中心(效果不错)
	    animateScale : true,
	    //Function - 动画完成时执行的函数
	    //onAnimationComplete : null
	});
}
</script>

饼图可自定义构图参数:

Pie.defaults = {
                    //是否显示每段行程(即扇形区,不为true则无法看到后面设置的边框颜色)
                    segmentShowStroke : true,
                    //设置每段行程的边框颜色
                    segmentStrokeColor : "red",
                    //心啊是每段扇区边框的宽度
                    segmentStrokeWidth :2,
                    //Boolean - 是否执行动画
                    animation : true,
                    //Number - 动画时间
                    animationSteps : 100,
                    //String - 动画的效果
                    animationEasing : "easeOutBounce",
                    //Boolean -是否旋转动画
                    animateRotate : true,
                    //Boolean - 是否动画缩放饼图中心(效果不错)
                    animateScale : true,
                    //Function - 火动画完成时执行的函数
                    onAnimationComplete : null
}

环形图实例:

<canvas id="myChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script type="text/javascript">
var data = [{
    value: 30,
    color: "#F7464A",
    highlight: "#FA7C7C",
    label: "angularJS"
}, {
    value: 50,
    color: "#E2EAE9",
    highlight: "#F2F5F5",
    label: "juqery"
}, {
    value: 100,
    color: "#D4CCC5",
    hightlight: "#DBD6D1",
    label: "javascript"
}, {
    value: 40,
    color: "#949FB1",
    highlight: "#AFBCCE",
    label: "nodeJS"
}, {
    value: 120,
    color: "#4D5360",
    highlight: "#767C86",
    label: "html"
}];
window.onload = function() {
	var ctx=document.getElementById("myChart").getContext("2d");
	new Chart(ctx).Doughnut(data,{
        //是否显示每段行程(即环形区,不为true则无法看到后面设置的边框颜色)
        segmentShowStroke: true,
        //设置每段行程的边框颜色
        segmentStrokeColor: "#fff",
        //设置每段环形的边框宽度
        segmentStrokeWidth: 2,
        //图标中心剪切圆的比例(0为饼图,接近100则环形宽度越小)
        percentageInnerCutout: 50,
        //是否执行动画
        animation: true,
        //执行动画时间
        animationSteps: 100,
        //动画特效
        animationEasing: "easeOutBounce",
        //是否旋转动画
        animateRotate: true,
        //是否缩放图表中心
        animateScale: true,
        //动画完成时的回调函数
		//onAnimationComplete: null
	});
}
</script>

环形图可自定义构图参数:

Doughnut.defaults={
                        //是否显示每段行程(即环形区,不为true则无法看到后面设置的边框颜色)
                        segmentShowStroke: true,
                        //设置每段行程的边框颜色
                        segmentStrokeColor: "#fff",
                        //设置每段环形的边框宽度
                        segmentStrokeWidth: 2,
                        //图标中心剪切圆的比例(0为饼图,接近100则环形宽度越小)
                        percentageInnerCutout: 50,
                        //是否执行动画
                        animation: true,
                        //执行动画时间
                        animationSteps: 100,
                        //动画特效
                        animationEasing: "easeOutBounce",
                        //是否旋转动画
                        animateRotate: true,
                        //是否缩放图表中心
                        animateScale: true,
                        //动画完成时的回调函数
                       //onAnimationComplete: null
 }

Chart.js一共有6种类型大图表,除了以上4种,还有雷达图或蛛网图、极地区域图。需要注意的是,Chart.js目前已有很多版本,不同版本应用方法可能存在差异。如需更多应用信息参考,可以自行参阅:Chart.js中文文档各版本外部引用地址

Chart.js中的6种图表,js部分大致分为数据结构、图表参数(通用参数以及各自特有参数)和实例化引用三大部分,而数据的动态加载可在数据结构中的data属性传入json等数据文件或变量。

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
1

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看