>>您所在位置:博客 >> 技术 >> 技术讲座

extjs4.0chart入门之Column柱状图如何实现分组效果

作者:extcharts | 时间:2013-10-29 15:04:55 | [  ] | 来源:ExtJs | 阅读阅读:3481 | 评论  评论: 0 | 收藏 收藏
extjs,chart,图表,column,分组柱状图  
原创 [摘要]: 用extjs实现图表其实也很简单的,今天就来说说如何结合柱状图和Bar图做一个分组的柱状图。首先需要引入相关的js和css文件 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../shared/example.css" /> <script type="text/javascript" src="../../ext-all.js"></script> 接着提供数据源 window.store1 = Ext.create('Ext.data.JsonStore', ...

用extjs实现图表其实也很简单的,今天就来说说如何结合柱状图和Bar图做一个分组的柱状图。首先需要引入相关的js和css文件


<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>


接着提供数据源


 window.store1 = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
        data: generateData()
});



window.generateData = function(n, floor){
        var data = [],
            p = (Math.random() *  11) + 1,
            i;
            
        floor = (!floor && floor !== 0)? 20 : floor;
        
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.monthNames[i % 12],
                data1: Math.floor(Math.max((Math.random() * 100), floor)),
                data2: Math.floor(Math.max((Math.random() * 100), floor)),
                data3: Math.floor(Math.max((Math.random() * 100), floor)),
                data4: Math.floor(Math.max((Math.random() * 100), floor)),
                data5: Math.floor(Math.max((Math.random() * 100), floor)),
                data6: Math.floor(Math.max((Math.random() * 100), floor)),
                data7: Math.floor(Math.max((Math.random() * 100), floor)),
                data8: Math.floor(Math.max((Math.random() * 100), floor)),
                data9: Math.floor(Math.max((Math.random() * 100), floor))
            });
        }
        return data;
};


我们将一个chart放在一个窗体内,代码如下所示:


Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite', 'Ext.window.MessageBox']);

Ext.onReady(function () {

    var chart = Ext.create('Ext.chart.Chart', {
            style: 'background:#fff',
            animate: true,//是否显示动画效果
            shadow: true,//是否显示阴影部分
            store: store1,//序列
            legend: {
                position: 'bottom' //图例显示位置
            },
            //坐标轴定义
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data1'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Number of Hits',
                grid: true,//是否显示横向网格线
                minimum: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year',
                grid: true //是否显示纵向网格线
            }],
            series: [{
                type: 'column',
                axis: 'left',
                highlight: false, //高亮显示
                //鼠标移动到柱子上所显示的数据提示框
                tips: {
                  trackMouse: true,//数据提示框是否跟着鼠标移动
                  width: 180,//提示框宽度
                  height: 28,
                  renderer: function (storeItem, item) {
                      this.setTitle(storeItem.get('name') + ' | ' + item.yField + ': ' + storeItem.get(item.yField) + ' RMB');
                  }
                },
                label: {
                  display: 'insideEnd',
                  'text-anchor': 'middle',
                    field: ['data1', 'data2', 'data3'],
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'vertical',
                    color: '#333'
                },
                xField: 'name',
                yField: ['data1','data2','data3']
            }]
        });

    //创建一个窗体将chart装载在其内
    var win = Ext.create('Ext.window.Window', {
        width: 800,
        height: 600,
        minHeight: 400,
        minWidth: 550,
        hidden: false,
        maximizable: true,
        title: 'Column Chart',
        autoShow: true,
        layout: 'fit',
        tbar: [{
            text: 'Save Chart',
            handler: function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                    if(choice == 'yes'){
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        }, {
            text: 'Reload Data',
            handler: function() {
                // 延迟加载数据
                window.loadTask.delay(100, function() {
                    store1.loadData(generateData());
                });
            }
        }],
        items: chart    
    });
});


最终效果如下所示:

extjs4.0chart入门之Column柱状图如何实现分组效果

是不是很简单的哇!

多谢支持!

extjs,chart,图表,column,分组柱状图  
 本文为原创型文章转载请尊重他人劳动成果并注明出处:http://www.stepday.com/topic/?641
系统温馨提示 可以扫描本站该博客文章的QR二维码进行访问  本站该博客文章的QR二维码
上一篇:Ext.Net关于动态修改TreePanel的TreeStore的AjaxProxy的Url的问题以及深入剖析
下一篇:highcharts初级入门之dataLabels:如何设置指定数据点显示数据标签
加精
10
踩扁
0
查看评论 查看评论
系统温馨提示 暂无任何评论
发表评论 发表评论
* 以下用户言论只代表其个人观点,不代表STEP DAY网站的观点或立场
用户名:
关联阅读 关联阅读
1、ECharts图表组件入门教程:如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
2、ECharts图表初级入门篇:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
3、关于Highcharts图表chart的几个事件汇总说明
4、ECharts图表初级入门(三):ECharts对象的数据实例化方法汇总以及注意事项
5、使用ExtJs的FileUploadField.js上传文件时遭遇文件路径始终包含C:\fakepath字眼 如何获取真实文件路径
6、关于Highcharts图表组件动态修改属性的方法(API)总结之Series
7、关于Highcharts图表组件动态修改属性的方法(API)总结之Axis
8、ECharts图表组件初级入门之(一):如何将ECharts引入至项目中的几种方式
9、highcharts图表组件通过设置tooltip属性自定义数据提示信息
10、Fusioncharts图表组件API参考方法(Functions)汇总篇(续)
系统温馨提示请您注意
·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在STEP DAY新闻评论发表的作品,STEP DAY有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款