extjs图表绘制之条形图实现方法分析

本文实例讲述了extjs图表绘制之条形图实现方法。分享给大家供大家参考，具体如下： 这篇文章将介绍extjs图表中条形图。 将实现以下的功能： 1.从后端请求数据并运用到图表中，形成动态数据。 2.查询出每年各个月中人数。 3.改变条形柱的颜色，改变默认的颜色换成自己想要的颜色。 renderer: function(sprite, storeItem, barAttr, i, store) { barAttr.fill = '#3D96AE' return barAttr; }, 先看完整的代码： Ext.define('Ch 在EXTJS中，绘制条形图是通过EXTJS的Charts组件来实现的，这使得开发者可以创建各种复杂的可视化图表，包括条形图。在本文中，我们将深入探讨如何使用EXTJS实现条形图，以及如何实现一些特定的功能，如动态数据、自定义颜色和查询数据。 1. **动态数据加载**： 在EXTJS中，我们通常会从后端服务获取数据，并将其绑定到图表的store中。例如，创建一个`JsonStore`，定义字段映射，然后在需要时调用`store.load()`来从服务器拉取数据。在示例代码中，store的定义包含了字段定义，如'id', 'statTime', 'activeCount', 和 'effectiveCount'，并且'statTime'字段被设置为日期类型，以便正确处理时间数据。 ```javascript var store = Ext.create('Ext.data.JsonStore', { fields: [ {name: 'id', mapping: 'id'}, {name: 'statTime', mapping: 'statTime', type: 'date', dateFormat: 'time'}, 'activeCount', 'effectiveCount' ], // 加载数据的URL或其他加载逻辑 }); ``` 2. **查询出每年各个月中人数**： 这可以通过在后端数据库查询或者在EXTJS中对数据进行处理来实现。例如，我们可以根据'statTime'字段对数据进行分组和计数，以得到每个月的人数。在EXTJS的store中，可以通过监听`load`事件并在其中进行数据处理： ```javascript store.on('load', function(store, records, successful, operation, eOpts) { var monthlyCounts = {}; records.forEach(function(record) { var month = Ext.Date.format(record.get('statTime'), 'm'); monthlyCounts[month] = (monthlyCounts[month] || 0) + 1; }); // 使用monthlyCounts对象进行进一步处理 }); ``` 3. **改变条形柱的颜色**： EXTJS的图表允许通过配置`renderer`函数来自定义系列项的外观。在这个函数中，你可以根据需要修改属性，如填充色。在示例代码中，`renderer`函数接收`sprite`, `storeItem`, `barAttr`, `i`, `store`作为参数，然后改变`barAttr.fill`属性来设定柱状图的颜色： ```javascript renderer: function(sprite, storeItem, barAttr, i, store) { barAttr.fill = '#3D96AE'; // 自定义颜色 return barAttr; } ``` 4. **完整代码结构**： 通常，EXTJS的图表组件嵌套在面板（Panel）中，可能包含其他UI元素，如查询表单或工具栏。在示例中，创建了一个`ChartColumnTest`类，它扩展了`Ext.panel.Panel`，并包含了`grid`、`store`、`axes`和`series`的定义。此外，还创建了一个查询工具栏，包含一个下拉列表用于选择年份，以及一个按钮触发数据加载。 ```javascript Ext.define('ChartColumnTest', { extend: 'Ext.panel.Panel', autoScroll: true, initComponent: function() { // ... this.grid = this.getGridPanel(); this.mainPanel = Ext.create('Ext.panel.Panel', { layout: 'fit', items: [this.grid], tbar: this.createQueryTbar(), }); // ... }, getGridPanel: function() { // ... return { xtype: 'chart', // ... series: this.createSeries(), // ... }; }, createQueryTbar: function() { // ... }, createStore: function() { // ... } // ... }); ``` EXTJS提供了丰富的功能来创建交互式和美观的条形图。通过理解如何处理数据、自定义样式以及构建用户界面，开发者能够构建出符合需求的图表应用。