`

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

阅读更多

 

原文链接:http://www.cnblogs.com/landeanfen/p/5026485.html

 

前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否、是否免费、是否和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中文文档。附上源码,有需要看看。

分享到:
评论

相关推荐

    开源flash图表--open flash chart

    Open Flash Chart还提供了许多高级特性,如动画效果、数据动态更新、图表组件(如工具提示、图例、轴标签)等。通过学习和实践,开发者可以充分利用这些功能,构建出更复杂、更具吸引力的图表应用。 **五、相关资源...

    vue-orgchart-master.zip

    Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、易用性和高性能著称。"vue-orgchart-master.zip" 文件包含了一个使用Vue.js编写的树状组织架构图组件,这通常用于显示公司组织结构、家庭关系或其他有层级...

    前端开源库-redux-devtools-chart-monitor

    **前端开源库——Redux DevTools Chart Monitor** 在前端开发领域,优化应用状态管理和调试是提升开发效率的关键。Redux,一个著名的JavaScript状态管理库,为React和其他JavaScript应用提供了强大的工具链。其中,...

    Echarts组件南丁格尔玫瑰图

    ECharts是一款由百度开发的开源JavaScript图表库,它提供了丰富的可视化图表类型,包括柱状图、折线图、饼图等,并且支持自定义交互和动画效果。在ECharts中,南丁格尔玫瑰图(Nightingale Rose Chart)是一种特殊...

    【JavaScript源代码】Vue使用Echarts实现立体柱状图.docx

    Vue.js作为一款流行的前端框架,与Echarts(一款强大的JavaScript图表库)的结合,可以轻松实现各种复杂的数据可视化效果。 #### 二、基础知识准备 在深入探讨如何使用Vue.js结合Echarts实现立体柱状图之前,我们先...

    dataviznyc:包含https:dataviz.nyc的分析和前端代码的存储库

    4. **JavaScript库**:对于数据可视化的实现,JavaScript库如D3.js或Chart.js可能会被用到。这些库提供了丰富的功能,便于创建动态和交互式的图表。 5. **响应式设计**:考虑到可能在不同设备上查看,项目的前端...

    open flash chart 学习笔记之入门

    Open Flash Chart 是一款优秀的开源Flash图表组件,它允许开发者轻松创建各种复杂的图表,适用于PHP等Web开发环境。本文将为初学者提供一个简洁明了的入门教程,避免在纷繁复杂的信息中迷失方向。 首先,要开始使用...

    AdminLTE-master.zip

    3. **数据展示**:集成了一些流行的图表库,如Chart.js和Flot,用于创建实时数据可视化。 4. **主题选择**:提供多种颜色主题,用户可以根据自己的喜好调整界面风格。 5. **多语言支持**:支持多种语言,方便国际化...

    Solar-Cell-Efficiency-Records---d3js-chart:此D3JS可视化视图是著名图表的交互式版本,该图表跟踪自1975年以来的太阳能电池效率

    "Solar-Cell-Efficiency-Records---d3js-chart"项目可能包含以下组件: 1. 数据源:项目的背后应有一份详尽的太阳能电池效率数据库,记录了各种类型太阳能电池的历史效率数据,包括多晶硅、单晶硅、薄膜电池、新型...

    hAdmin 后台UI框架

    3. **图表展示**:hAdmin集成了一些数据可视化插件,如ECharts或Chart.js,方便开发者轻松实现数据报表的展示。 4. **页面模板**:提供登录、个人中心、表格、图表、表单等多个预设页面模板,覆盖了后台系统常见的...

    微信的eCharts wx-charts

    而`wx-charts`正是为了解决这一问题而生,它是一个专为微信小程序设计的图表库,基于百度的开源图表库ECharts进行封装,使得开发者能够轻松地在微信小程序上实现各种动态、交互式的图表。 1. **ECharts介绍** ...

    pyecharts数据和代码

    ECharts 是百度开源的一款基于 JavaScript 的数据可视化库,支持多种图表类型,如折线图、柱状图、饼图、散点图等,且具有良好的交互性和响应式设计。Pyecharts 则是 Python 中的 ECharts 接口,允许我们在 Python ...

    HomeAssistantLovelaceUI的简约图形卡

    卡片可能还利用了诸如 Chart.js 这样的图形库来生成图表,Chart.js 是一个轻量级的库,适合在网页上快速创建各种类型的图表。 在实际应用中,"简约图形卡" 需要配合 Home Assistant 的 YAML 配置文件来设置。用户...

    echarts-master

    这些文件包含了ECharts的各个组件和功能实现,例如`chart`目录下的各种图表实现,`component`目录下的通用组件,如坐标轴、图例、工具提示等。开发者可以通过阅读源码了解ECharts的内部工作原理,甚至修改源码以满足...

    flex应用anychart

    例如,可以使用`anychart.onReady`函数初始化图表,然后通过`chart.container`指定图表的容器,使用`chart.data`加载数据,以及通过`chart.draw()`绘制图表。 在数据源方面,AnyChart支持多种格式,包括JSON、XML、...

    adminLTE--中文版已全部翻译

    4. **插件集成**:内置了多种常用的JavaScript插件,如日期选择器、图表库(例如Chart.js)、通知提醒等,无需额外寻找和整合。 5. **多语言支持**:包括中文在内的多语言版本,方便不同地区的开发者和用户使用。 6....

    .net前端web模板

    3. **插件集成**:集成了jQuery、Chart.js和 Morris.js等数据可视化插件,可以方便地展示各种统计信息。 4. **导航菜单**:使用Bootstrap的导航栏和侧边栏,提供清晰的层级结构,方便用户导航。 5. **预定义样式**...

    lag-investors.github.io:专门针对拉瓜迪亚投资者俱乐部的网站

    这可能涉及使用库如D3.js或Chart.js,通过JavaScript将数据转化为可视化元素。 7. **交互组件**:为了促进会员间的交流,网站可能包含论坛、评论系统或其他社交功能。这些功能可能通过集成第三方服务(如Disqus)或...

Global site tag (gtag.js) - Google Analytics