最近在使用EXT 中 嵌套 highcharts的时候 遇到了 图表 内置的 显示层 的大小
如果 各位看官 想对这个js图标库 进行修改的话
就把 highcharts.src.js 图标库的 getChartSize 方法 重新设置
(图表中 控制不灵活的 可以改这里。 个人意见)
图表样式:
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
}
,
borderWidth: 1,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
labels: {
style: {
color: '#99b'
}
}
};
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
Ext.Panel 中实现的 js图表
var ac = new Ext.Panel({
title : '图形报表',
id : "mapDiv",
layout : "fit",
autoScroll : true,
height : 400,
listeners : {
activate : function(p){
var data = AjaxUtil.request({
url : "testAction!test.action"
});
var myobj= data.rows;
var deptname='';
var yf =[];
var nf =[];
var tqb =[];
for(var i=0;i<myobj.length;i++){
deptname += "'"+myobj[i].DEPT_NAME+"',";
yf.push(myobj[i].YF);
nf.push(myobj[i].NF);
tqb.push(myobj[i].TQB);
}
deptname = deptname.substring(0,deptname.length-1);
deptname = eval('('+"["+deptname+"]"+')');
yf = eval('('+"["+yf+"]"+')');
nf = eval('('+"["+nf+"]"+')');
var chart = new Highcharts.Chart({
chart: {
renderTo: 'mapDiv'
},
title: {
text: ' '
},
xAxis: {
categories: deptname
},
yAxis: {
min:0,
minPadding: 0.2,
maxPadding: 0.2,
tickInterval:5,
title: {
text: ' '
}
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y+'条工作申请';
}
return s;
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 60,
verticalAlign: 'top',
y: 50,
floating: true
},
series: [{
type: 'column',
name: '当月累计',
data: yf
}, {
type: 'column',
name: '前年当月',
data: tqb
}, {
type: 'spline',
name: '当年累计',
data: nf
}]
});
}
}
});
这个图表 是双柱形和单条线图
如附件图展示