ExtJs 绘制柱状图

chart.jsExt.onReady(function() { // 定义ColumnModel var store = new Ext.data.JsonStore({ fields : ['name', 'visits', 'views'], data : [{ name : '湖北', visits : 245000,
摘要由CSDN通过智能技术生成




chart.js

Ext.onReady(function() { // 定义ColumnModel
			var store = new Ext.data.JsonStore({
						fields : ['name', 'visits', 'views'],
						data : [{
									name : '湖北',
									visits : 245000,
									views : 3000000
								}, {
									name : '湖南',
									visits : 240000,
									views : 3500000
								}, {
									name : '北京',
									visits : 355000,
									views : 2000000
								}, {
									name : '上海',
									visits : 375000,
									views : 3200000
								}, {
									name : '深圳',
									visits : 590000,
									views : 3500000
								}, {
									name : '广州',
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,您可以使用 ExtJS 中的 `Ext.chart.series.Bar` 类来创建多列柱状图。以下是一个示例代码,展示如何在 ExtJS 中创建一个多列柱状图: ```javascript Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 400, height: 300, store: { fields: ['name', 'data1', 'data2', 'data3'], data: [ { name: 'A', data1: 10, data2: 20, data3: 30 }, { name: 'B', data1: 20, data2: 30, data3: 40 }, { name: 'C', data1: 30, data2: 40, data3: 50 }, { name: 'D', data1: 40, data2: 50, data3: 60 } ] }, axes: [ { type: 'numeric', position: 'left', fields: ['data1', 'data2', 'data3'], title: '数值', grid: true, minimum: 0 }, { type: 'category', position: 'bottom', fields: ['name'], title: '类别' } ], series: [ { type: 'bar', xField: 'name', yField: ['data1', 'data2', 'data3'], stacked: false, title: ['数据1', '数据2', '数据3'], style: { opacity: 0.80 }, highlight: { fillStyle: 'yellow' }, tooltip: { trackMouse: true, renderer: function (tooltip, record, item) { tooltip.setHtml(record.get('name') + ': ' + item.field + ' = ' + record.get(item.field)); } } } ] }); ``` 在上面的代码中,我们首先创建了一个 `Ext.chart.Chart` 实例,并将其渲染到页面的 `body` 元素中。然后,我们定义了一个数据源,其中包含了每个类别的三个数据列。接下来,我们定义了两个坐标轴:一个是数值轴,用于显示数据列的值;另一个是类别轴,用于显示类别名称。最后,我们定义了一个柱状图系列,其中 `xField` 是类别名称,`yField` 是三个数据列名称的数组,`stacked` 属性设置为 `false`,因为我们不希望将数据列堆叠在一起。我们还设置了一些样式和工具提示,以便用户可以查看每个数据点的值。 请注意,您需要在 ExtJS 应用程序中加载 `Ext.chart.*` 和 `Ext.draw.*` 包,以便使用 ExtJS 的图表和绘图功能。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值