extjs 图表展示代码

ExtJS 是一个强大的JavaScript应用程序框架，专为构建富客户端Web应用而设计。它提供了一整套组件和功能，包括表格、窗体、菜单、工具栏、图表等，用于创建复杂的、交互式的用户界面。在本示例中，我们关注的是ExtJS的图表展示功能。 在ExtJS 4中，图表功能得到了显著提升，提供了多种图表类型，如柱状图、饼图、线图、面积图、散点图等，可以满足各种数据可视化需求。这些图表不仅外观美观，还支持丰富的交互性和自定义选项。 要展示一个ExtJS图表，你需要在HTML页面中引入ExtJS库，包括核心库和图表模块。这通常通过链接CDN或者本地文件来完成。例如： ```html <script src="path/to/extjs/ext-all.js"></script> <script src="path/to/extjs/resources/themes/stylesheets/ext4/default/all.css"></script> <script src="path/to/extjs/extras/charts.js"></script> ``` 接下来，定义图表配置。ExtJS图表的基础类是`Ext.chart.Chart`，你可以创建一个新的实例并设置相关属性，如宽度、高度、标题、图例、X轴和Y轴的配置、系列（数据系列）等。以下是一个简单的柱状图示例： ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('Ext.data.Store', { fields: ['name', 'data'], data: [ { name: 'Category 1', data: 10 }, { name: 'Category 2', data: 30 }, // ... ] }); Ext.create('Ext.container.Viewport', { layout: 'fit', // 使用适应布局，使图表填满容器 items: { xtype: 'chart', // 指定图表类型 width: '100%', // 宽度 height: 400, // 高度 animate: true, // 开启动画 store: store, // 绑定数据源 series: [{ type: 'bar', // 柱状图 xField: 'name', // X轴字段 yField: 'data', // Y轴字段 title: 'Series 1' // 系列标题 }] } }); } }); ``` 这个例子中，我们创建了一个数据存储（store），包含一系列对象，每个对象有两个属性：`name` 和 `data`。然后我们创建了一个`viewport`，里面有一个`chart`组件，绑定了数据存储，并定义了柱状图系列。 图表还可以配置颜色、标签、提示框、图例样式等。例如，你可以通过`series`配置中的`style`属性来改变柱子的颜色，或者通过`axes`配置来定制X轴和Y轴的显示方式。 在下载的`ExtCharts`压缩包中，可能包含了多个示例代码，这些代码展示了如何创建不同类型的图表以及如何调整它们的样式和行为。通过研究这些示例，你可以深入理解ExtJS图表的功能和用法，并将其应用到自己的项目中。 ExtJS 4的图表功能强大且灵活，能够帮助开发者构建出专业级的数据可视化应用。通过学习和实践，你可以轻松地将数据转化为生动、有洞察力的图表，从而提升用户体验和数据分析的效率。