遇到了一个奇葩的需求，要求竖轴为部门，横轴为日期，根据日期连续显示资源利用情况及数量，找遍了extjs图标都没有这种东西，highcharts也去找了，没有能实现的demo。只要自己研究，先搞横轴日期，再搞连续画图。终于实现：
效果图：
代码案例：
Ext.onReady(function(){
var myDate = new Date();
var fromDate=myDate.getFullYear()-1;fromDate=fromDate+"-07";
var toDate=myDate.getFullYear()+1;toDate=toDate+"-06";
Ext.create({
border:false,//default
iconCls:"protlet-icon-default",//default
header:{//default
cls:'protlet-title-default',//default
title: '资源月份分布图'
},
xtype:"panel",
renderTo: "portlet-itgimDomainDateChart",
items: [{
xtype: 'cartesian',
border:false,
width: 820,
height: 400,
innerPadding: {top: 40, left:0, right: 30, bottom: 40},
tbar:[
{ xtype: 'button', text: 'Button 1' }
],
axes: [{
type: 'time',
position: 'bottom',
fields: 'month',
label:{rotate: {degrees: 90}},
dateFormat: 'Y-m',
grid: true,
fromDate: new Date(fromDate),
toDate: new Date(toDate)
}, {
type: 'category',
position: 'left',
fields: 'domain',
label:{textAlign:"right"}
}],
series: [{
type: 'scatter',
xField: 'month',
yField: 'domain',
label: {
field: 'num',
display: 'over',
fontSize: 10,
translateY:5,
translateX:-5,
scale: 0.7,
},
marker: {
type: 'image',
src:itgimDomainDateChartPortlet.portletSourceUrl+"/images/chartLine.png",//注意图片路径
width:32,
x:-18,
y:-7
}
}],
store: {
fields: [
{name:'domain'},
{name:'num'},
{name:'month', type: 'date', dateFormat: 'Y-m'}
],
data:[
{ domain: '信息部', num: 97151,month:'2016-08' },
{ domain: '信息部', num: 9715,month:'2016-10' },
{ domain: '财务部', num: 9715,month:'2016-07' },
{ domain: '财务部', num: 9715,month:'2016-11' },
{ domain: '财务部', num: 9715,month:'2017-01' },
{ domain: '财务部', num: 9715,month:'2016-09' },
{ domain: '财务部', num: 9715,month:'2016-10' },
{ domain: '采购部', num: 9715,month:'2017-01' },
{ domain: '销售部', num: 9715,month:'2017-01' }
]
}
}]
});
});