extjs画柱状图不显示柱子

HotGaoGao 发布于 2016/07/16 09:31
阅读 461
收藏 0

用extjs仿照demo画了个柱状图,结果把js放在jsp里之后,发现其他都能显示,就是柱子不能显示。

RainHistogram.js

Ext.onReady(function() {
	var store = Ext.create('Ext.data.JsonStore', {
		fields: ['name', 'data'],
		data: [
			{ 'name': 'metric one',   'data':10 },
			{ 'name': 'metric two',   'data': 7 },
			{ 'name': 'metric three', 'data': 5 },
			{ 'name': 'metric four',  'data': 2 },
			{ 'name': 'metric five',  'data':27 }
		]
	});
 
	Ext.create('Ext.chart.Chart', {
		renderTo: Ext.getBody(),
		width: 500,
		height: 300,
		animate: true,
		store: store,
		axes: [{
			type: 'Numeric',
			position: 'bottom',
			fields: ['data'],
			label: {
				renderer: Ext.util.Format.numberRenderer('0,0')
			},
			title: 'Sample Values',
			grid: true,
			minimum: 0
		}, {
			type: 'Category',
			position: 'left',
			fields: ['name'],
			title: 'Sample Metrics'
		}],
		series: [{
			type: 'bar',
			axis: 'bottom',
			highlight: true,
			style: {
				color : 'red'  
			},
			tips: {
			  trackMouse: true,
			  width: 140,
			  height: 28,
			  renderer: function(storeItem, item) {
				this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
			  }
			},
			label: {
			  display: 'insideEnd',
				field: 'data',
				renderer: Ext.util.Format.numberRenderer('0'),
				orientation: 'horizontal',
				color: 'blue',
				'text-anchor': 'middle'
			},
			xField: 'name',
			yField: 'data'
		}]
	});
});



jsp如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
 <link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
<link href="../CSSScheduleManagement/tab.css" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" type="text/css" href="../ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
 <link rel="stylesheet" type="text/css" href="../CSSScheduleManagement/layout.css">
 <link rel="stylesheet" type="text/css" href="../CSSScheduleManagement/commons.css"> 
 
 <script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../assets/js/bootstrap.js"></script>
 <script type="text/javascript" src="../ext-5.0.0/build/ext-all.js"></script>  
 <script type="text/javascript" src="../ext-5.0.0/build/packages/ext-charts/build/ext-charts.js"></script> 
<script type="text/javascript" src="../JSScheduleManagement/RainHistogram.js"></script>



加载中
0
HotGaoGao
HotGaoGao
用highchart画了两个,extjs确实比较复杂啊.
返回顶部
顶部