开发者社区> 嗯哼9925> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JS组件系列——开源免费图表组件:Chart.js

简介:
+关注继续查看

前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否、是否免费、是否和bootstrap风格一致。想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.js,总的来说,这个组件不能说最好,但是对于一般不太复杂的报表是够用了。今天就来看看它如何使用吧。

一、组件比较以及选用

其实说起报表组件,网上一搜一大把,各种让人眼花缭乱的组件,但貌似比较出名一点的都是收费的。综合来看:

JsChart组件功能强大,能适应各种复杂的需求和业务;Chart.js免费。

FunsionChart界面优美,效果炫,用户体验好;Chart.js免费。

HighChart使用方便,调用简单,开发效率高;Chart.js免费。

如果你说:咱们公司不缺钱,当然是哪个最好用哪个喽。那博主只能说:有钱,任性。至少博主所在的公司是把免费放在选用组件的第一原则的。

chart.js源码:https://github.com/nnnick/Chart.js

chart.js 英文文档:http://www.chartjs.org/docs/

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

二、组件效果展示

上面扯了一大堆没用的,先来一组效果图看看吧。

1、柱状图

原始的柱状图

加上图表说明和tooltip的柱状图

2、饼状图

3、曲线图

4、环状图

5、极地区域图

6、雷达图

三、代码示例

关于chart.js的使用代码其实不用多说,文档里面很容易看懂。这里就简单展示一个:

chart.js的原理是使用html5的canvas标签,所以首先它需要一个canvas的标签放在cshtml页面

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/Chart.js-master/Chart.js"></script>
<canvas id="myChart" width="800" height="600"></canvas>

然后js里面(我们先以柱状图为例来说明)

复制代码
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            fillColor: "#CCCCFF",
            strokeColor: "rgba(220,220,220,1)",
            label: "2010年",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            fillColor: "#CCFFCC",
            strokeColor: "#CCFFCC",
            label:"2011年",
            data: [28, 48, 40, 19, 96, 27, 100]
        },
        {
            fillColor: "#FFFFCC",
            strokeColor: "#FFFFCC",
            label: "2012年",
            data: [13, 55, 40, 19, 23, 27, 64]
        },
        {
            fillColor: "#99FFFF",
            strokeColor: "#99FFFF",
            label: "2013年",
            data: [98, 11, 52, 19, 65, 20, 77]
        }
    ]
}

$(function () {
    var ctx = $("#myChart").get(0).getContext("2d");
    var myNewChart = new Chart(ctx);
    myNewChart.Bar(data);
});
复制代码

如果是做业务需求,一般来说,data的数据是从后台构造成指定格式的json对象然后传递到前端。前端调用的时候只需要简单的两句:

var ctx = $("#myChart").get(0).getContext("2d");
new Chart(ctx).Bar(data);

如果是需要修改它的默认显示参数,则可以指定options

复制代码
var options = {
    //Boolean - If we show the scale above the chart data      
    //是否显示柱状图上面的数据
    scaleOverlay: true,

    //Boolean - If we want to override with a hard coded scale
    scaleOverride: false,

    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps: null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth: 50,
    //Number - The scale starting value
    scaleStartValue: null,

    //String - Colour of the scale line    
    //x/y轴坐标线的颜色
    scaleLineColor: "rgba(0,0,0,.1)",

    //Number - Pixel width of the scale line  
    //坐标线的宽度
    scaleLineWidth: null,

    //Boolean - Whether to show labels on the scale    
    //是否显示label值
    scaleShowLabels: true,

    //Interpolated JS string - can access value
    scaleLabel: "<%=value%>",

    //String - Scale label font declaration for the scale label
    //字体Family
    scaleFontFamily: "'Arial'",

    //Number - Scale label font size in pixels
    //字体大小
    scaleFontSize: 12,

    //String - Scale label font weight style  
    //字体样式
    scaleFontStyle: "normal",

    //String - Scale label font colour   
    //字体颜色
    scaleFontColor: "#666",

    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines: false,

    //String - Colour of the grid lines
    //网格线颜色
    scaleGridLineColor: "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth: 1,

    //Boolean - If there is a stroke on each bar    
    barShowStroke: true,

    //Number - Pixel width of the bar stroke    
    barStrokeWidth: 2,

    //Number - Spacing between each of the X value sets
    // 柱状块与x值所形成的线(如:x=20这条线)之间的距离
    barValueSpacing: 5,

    //Number - Spacing between data sets within X values
    // 在同一x值内的柱状块之间的间距
    barDatasetSpacing: 1,

    //Boolean - Whether to animate the chart
    animation: true,

    //Number - Number of animation steps
    animationSteps: 60,

    //String - Animation easing effect
    animationEasing: "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete: function () {
        var strHtml = "";
        for (var i = 0; i < this.datasets.length; i++) {
            strHtml += "<li><div><span style='background-color:" + this.datasets[i].fillColor + ";'></span><label>" + this.datasets[i].label + "</label></div><div style='clear:both;'></div></li>";
        }
        $("#ul_type").html(strHtml);
    }
}
复制代码

然后在调用的时候稍作修改:

$(function () {
    var ctx = $("#myChart").get(0).getContext("2d");
    var myNewChart = new Chart(ctx);
    myNewChart.Bar(data, options);
});

 这里需要说明的一个地方是:由于使用的是chart.js 1.0.2版本,所以下图右下角的那个说明的块是博主自己在onAnimationComplete这个事件里面通过js加上去的

好像新版的chart.js是自带的这个功能。等待发布!

四、总结

至此,柱状图的使用就说完了。其他图表的用法和这个相似度达到90%,博主就不一一介绍了,待会直接上源码。总的来说,这个组件开源、免费,然后它非常轻量级,不依赖任何的js组件(如果上面的代码中不用jQuery,可以直接用DOM的方法去取),整个js压缩后仅仅4.5K大小。然而由于它的原理是基于html5的,所以对浏览器有一定的要求,并且它对IE7、IE8有降级处理方案,详见Chart.js中文文档。附上源码,有需要看看。

 





本文转自懒得安分博客园博客,原文链接:http://www.cnblogs.com/landeanfen/p/5026485.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一步一步实现ATL开发的ActiveX组件与javascript的交互(一)
1.      打开VS2008,单击起始页中的“New Project…”,选择“ATL”分类下的“ATL Project”项目,项目名称为“ATLtest”。在随后出现的项目向导中,使用默认配置即可。
1322 0
ActiveX组件与JavaScript交互
1.在COM组件中调用JavaScript函数// 连接点方式页面javascript脚本        alert("State(" + s + ")");        return 123;        testCom.
948 0
javascript 实现RMB转大写
function convertCurrency(currencyDigits) { // Constants: var MAXIMUM_NUMBER = 99999999999.
717 0
小伙伴们惊呆了!10行 JavaScript 实现文本编辑器
  最近,我需要做一个非常基本的网页内容编辑功能。我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表,对齐等等。 您可能感兴趣的相关文章 分享九个不可思议的 WebGL 应用试验 2012年最经典的10款 HTML5 游戏集锦 35款非常优秀的基于 HTML5 网页游戏 20个惊艳的 HTML5 Canvas 应用试验 8个惊艳的 HTML5 和 JavaScript 特效       用谷歌搜索找了很久,发现所有的插件都是功能太复杂,不是我想要的。
823 0
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfishfilter.js。
614 0
javascript:二叉搜索树 实现
二叉搜索树:顾名思义,树上每个节点最多只有二根分叉;而且左分叉节点的值 < 右分叉节点的值 。 特点:插入节点、找最大/最小节点、节点值排序 非常方便 二叉搜索树-javascript实现 // 目标节点的值 //应该向左插,工作节点...
663 0
JavaScript通过RegExp实现客户端验证
1.让文本框只允许输入数字,运用asp.net mvc3.0的文本框控件。 @Html.TextBox("txt",null, new {@style="width:300;",onkeypress="return RegValidateIsDigit(event)" }) 可以看到在文...
748 0
DataGrid中绑定javascript事件,实现删除提示和变换背景色
private void dgSearch_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e){ if(e.
735 0
以【猫叫、老鼠跑、主人醒】为例子,使用 javascript 来实现 观察者模式 (有在线演示)
  “猫叫、老鼠跑、主人醒”是一个很古老的话题了,大家也都有各自的想法和解决方案。我也是看了很多,一开始的时候是相当的迷糊,这个怎么就是面试题了?考的是啥呀,和编程有关系吗?又是猫又是老鼠的,晕死了。
1311 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
JS 语言在引擎级别的执行过程
立即下载