EasyUIグラフプラグインHighchartsクッキー、折れ線、柱図
25577 ワード
<body>
<div class="easyui-tabs" style="width: auto; height: 470px">
<div title="Tab01" style="padding: 10px">
<div id="container"></div>
</div>
<div title="Tab02" style="padding: 10px">
<h2>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin: 20px 0;"></div>
<table id="dg" class="easyui-datagrid"
title="Row Editing in DataGrid" style="width: 700px; height: auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: $.sxThx.contextPath + '/UserAction.do?method=getEmailInfoList',
method: 'get',
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'keyid',width:80">Item ID</th>
<%-- <th
data-options="field:'productid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'productname',
method:'get',
url:'products.json',
required:true
}
}">Product</th>--%>
<th
data-options="field:'email_mail',width:80,align:'right',editor:'validatebox'">List
Price</th>
<th
data-options="field:'email_tel',width:80,align:'right',editor:{type:'numberbox'}">Unit
Cost</th>
<th data-options="field:'email_user_name',width:250,editor:'validatebox'">Attribute</th>
<%--<th
data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>--%>
</tr>
</thead>
</table>
<div id="tb" style="height: auto">
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-remove',plain:true"
onclick="removeit()">Remove</a> <a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-search',plain:true"
onclick="getChanges()">GetChanges</a>
</div>
</div>
<div title="Tab03" style="padding: 10px">
<div>
<label for="keyword">year:</label>
<select id="year" class="easyui-combobox" name="dept" style="width:100px;">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<a href="javascript:void(0);"onclick="statisticByYear();"class="button button-rounded button-flat-primary">
<i class="test-icon-search icon-padding-right5"></i>query</a><br>
</div>
<div id="highchartsLine" >
</div>
</div>
<div title="Tab04" style="padding: 10px">
<div>
<label for="keyword">year:</label>
<select id="years" class="easyui-combobox" name="dept" style="width:100px;">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select><br>
<label for="keyword">funcName1:</label>
<input id="FuncName1" name="FuncName" class="easyui-combobox" data-options="editable: false, valueField:'CODEVALUE', textField:'CODENAME', data: [{CODENAME: 'admin',CODEVALUE: '0'},{CODENAME: 'hujing',CODEVALUE: '1'},{CODENAME: 'huyangzh',CODEVALUE: '2',selected:true}]" style="width:150px;"/>
<label for="keyword">funcName2:</label>
<input id="FuncName2" name="FuncName" class="easyui-combobox" data-options="editable: false, valueField:'CODEVALUE', textField:'CODENAME', data: [{CODENAME: 'admin',CODEVALUE: '0'},{CODENAME: 'hujing',CODEVALUE: '1'},{CODENAME: 'huyangzh',CODEVALUE: '2',selected:true}]" style="width:150px;"/>
<label for="keyword">funcName3:</label>
<input id="FuncName3" name="FuncName" class="easyui-combobox" data-options="editable: false, valueField:'CODEVALUE', textField:'CODENAME', data: [{CODENAME: 'admin',CODEVALUE: '0'},{CODENAME: 'hujing',CODEVALUE: '1'},{CODENAME: 'huyangzh',CODEVALUE: '2',selected:true}]" style="width:150px;"/><br>
<a href="javascript:void(0);" onclick="highchartsColumn();" class="button button-rounded button-flat-primary">
<i class="test-icon-search icon-padding-right5"></i>query</a>
<a href="javascript:void(0);" onclick="clearForm();" class="button button-rounded button-flat-primary">
<i class="test-icon-search icon-padding-right5"></i>clear</a><br>
</div>
<div id="highchartsColumn" style="">
</div>
</div>
</div>
<script type="text/javascript"
src="<%=request.getContextPath()%>/common/plugins/jquery.iframe.post.form/jquery.iframe.post.form.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/pages/demo/demoStatistic.js"></script>
</body>10
$(function (){
//
statisticFuncType();
});
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
/*var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
var productname = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['productname'] = productname;*/
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{status:'P'});
editIndex = $('#dg').datagrid('getRows').length;
alert(editIndex);
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
// --------------------
function statisticFuncType () {
$.ajax({
async : false,
type : 'POST',
url : $.test.contextPath + "/DemoAction.do?method=statisticFuncName",
dataType : 'json',
success : function(data) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,//
plotShadow: false
},
title: {
text: 'Pic'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',//
name: 'Browser share',//
data: [
[' ', data. ],
[' ', data. ],
[' ', data. ],
{ name:' ',
y:data. ,
sliced: true,
selected: true
}
]
}]
});
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
};
// -------------------------------------
function statisticByYear() {
var year = $("#year").combobox("getValue");
$.ajax({
async : false,
type : 'POST',
url : $.test.contextPath + "/DemoAction.do?method=statisticByYears",
data : "year="+year,
dataType : 'json',
success : function(data) {
$('#highchartsLine').highcharts({
title: {
text: ' ',
x: -20 //center
},
subtitle: {
text: data.title,
x: -20
},
xAxis: {
categories: data.name,
title:{
text: ' ( )'
}
},
yAxis: {
title: {
text: ' ( )'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ' '
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
/* point: {
events: {
click: function () {
var month = this.category;
//window.location.href= $.test.contextPath + "/DemoAction.do?method=beginStatisticByMonth&year="+year+"&month="+month;
}
}
},*/
name: 'admin ',
data: data.value
},{
name: 'hujing ',
data: data.value2
}]
});
}
});
};
// ----------------------------------------
function highchartsColumn(){
var year = $("#years").combobox("getValue");
var funcName1 = $("#FuncName1").combobox("getText");
var funcName2 = $("#FuncName2").combobox("getText");
var funcName3 = $("#FuncName3").combobox("getText");
var params = {"years" : year, "funcName1" : funcName1, "funcName2" : funcName2, "funcName3" : funcName3};
$.ajax({
async : false,
type : 'POST',
url : $.test.contextPath + "/DemoAction.do?method=statisticByFuncName",
data : params,
dataType : 'json',
success : function(data) {
$('#highchartsColumn').highcharts({
chart: {
type: 'column'
},
title: {
text: data.title
},
subtitle: {
text: data.subTitle
},
xAxis: {
categories: data.name
},
yAxis: {
min: 0,
title: {
text: data.text
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: data.name1,
data: data.value1
}, {
name: data.name2,
data: data.value2
}, {
name: data.name3,
data: data.value3
}]
});
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
function init(){
$('#FuncName1').combobox({
url: $.test.contextPath + "/LogAction.do?method=getFuncName",
valueField: 'Value',
textField: 'Text',
onChange: function(newValue, oldValue) {
}
});
}
/**
*
*/
function clearForm() {
$("#FuncName1").combobox("setValue", '');
$("#FuncName2").combobox("setValue", '');
$("#FuncName3").combobox("setValue", '');
}10
public class DemoAction extends DispatchAction{
private DemoDao demoDao;
public DemoDao getDemoDao() {
return demoDao;
}
public void setDemoDao(DemoDao demoDao) {
this.demoDao = demoDao;
}
public ActionForward begin(ActionMapping mapping, ActionForm form,HttpServletRequest request,
HttpServletResponse response) throws Exception {
return mapping.findForward("begin");
}
/**
*
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws IOException
* @throws Exception
*/
public ActionForward statisticFuncName(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception{
String[] funcNames = {" "," "," "," "};
JSONObject jo = new JSONObject();
int num = 0;
for(int i = 0; i < funcNames.length; i++){
num = demoDao.getPicTypeData(funcNames[i]);
jo.put(funcNames[i], num);
}
RiaUtils.writeJsonText2Page(jo.toString(), response);
return null;
}
/**
*
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward statisticByYears(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception{
String year = request.getParameter("year");
String beginTime = null;
String beginTime2 = null;
String endTime = null;
String endTime2 = null;
Date firstTime = null;
Date firstTime2 = null;
String funcName = " ";
LogStatisticFilter lsf = new LogStatisticFilter();
String openTime = year+"/01/01 00:00:00";
SimpleDateFormat formatter = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
JSONObject json = new JSONObject();
int[] num = new int[12];
int[] num2 = new int[12];
String[] name = {"01", "02", "03", "04", "05", "06","07", "08", "09", "10", "11", "12"};
for(int i = 0; i<12; i++){
firstTime = formatter.parse(openTime);
beginTime = openTime;
Calendar calendar = Calendar.getInstance();
calendar.setTime(firstTime);
calendar.add(calendar.MONTH, 1);
openTime = formatter.format(calendar.getTime());
endTime = openTime;
lsf.setBeginTime(formatter.parse(beginTime));
lsf.setEndTime(formatter.parse(endTime));
lsf.setFunctionName(funcName);
lsf.setRoleName("admin");
num[i] = demoDao.statisticByYears(lsf);
}
json.put("title", year+" ");
json.put("name", name);
json.put("value", num);
String openTime2 = year+"/01/01 00:00:00";
for(int i = 0; i<12; i++){
firstTime2 = formatter.parse(openTime2);
beginTime2 = openTime2;
Calendar calendar = Calendar.getInstance();
calendar.setTime(firstTime2);
calendar.add(calendar.MONTH, 1);
openTime2 = formatter.format(calendar.getTime());
endTime2 = openTime2;
lsf.setBeginTime(formatter.parse(beginTime2));
lsf.setEndTime(formatter.parse(endTime2));
lsf.setFunctionName(funcName);
lsf.setRoleName("hujing");
num2[i] = demoDao.statisticByYears(lsf);
}
json.put("title", year+" ");
json.put("name", name);
json.put("value2", num2);
RiaUtils.writeJsonText2Page(json.toString(), response);
return null;
}
/**
*
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward statisticByFuncName(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response)throws Exception{
String funcName1 = request.getParameter("funcName1");
String funcName2 = request.getParameter("funcName2");
String funcName3 = request.getParameter("funcName3");
String year = request.getParameter("years");
String beginTime = null;
String endTime = null;
Date firstTime = null;
String openTime = year+"/01/01 00:00:00";
SimpleDateFormat formatter = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
LogStatisticFilter lsf = new LogStatisticFilter();
int[] value1 = new int[12];
int[] value2 = new int[12];
int[] value3 = new int[12];
String[] name = {"Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sept","Oct","Nov","Dec"};
for(int i = 0; i<12; i++){
firstTime = formatter.parse(openTime);
beginTime = openTime;
Calendar calendar = Calendar.getInstance();
calendar.setTime(firstTime);
calendar.add(calendar.MONTH, 1);
openTime = formatter.format(calendar.getTime());
endTime = openTime;
lsf.setBeginTime(formatter.parse(beginTime));
lsf.setEndTime(formatter.parse(endTime));
if(funcName1 != null){
lsf.setFunctionName(funcName1);
lsf.setRoleName(funcName1);
value1[i] = demoDao.statisticByFuncName(lsf);
}
if(funcName2 != null){
lsf.setFunctionName(funcName2);
lsf.setRoleName(funcName2);
value2[i] = demoDao.statisticByFuncName(lsf);
}
if(funcName3 != null){
lsf.setFunctionName(funcName3);
lsf.setRoleName(funcName3);
value3[i] = demoDao.statisticByFuncName(lsf);
}
}
JSONObject jo = new JSONObject();
jo.put("value1", value1);
jo.put("value2", value2);
jo.put("value3", value3);
jo.put("name1", funcName1);
jo.put("name2", funcName2);
jo.put("name3", funcName3);
jo.put("title", " ");
jo.put("subTitle", year);
jo.put("text", " ");
jo.put("name", name);
RiaUtils.writeJsonText2Page(jo.toString(), response);
return null;
}
}10
@Override
public int getPicTypeData(String funcName) {
return (Integer) sqlSession.selectOne("com.demo.T_BUSINES_LOG.statisticFnucName", funcName);
}
@Override
public int statisticByYears(LogStatisticFilter statisticfilter) {
return (Integer)sqlSession.selectOne("com.demo.T_BUSINES_LOG.statisticByYears" , statisticfilter);
}10
<select id="statisticFnucName" parameterType="String" resultType="java.lang.Integer">
select count(*)
from T_BU_LOG T
where T.SE_TYPE=#{funcName}
</select>
<select id="statisticByYears" parameterType="com.demo.LogStatisticFilter" resultType="java.lang.Integer">
SELECT COUNT(1)
FROM T_OPE_LOG T
WHERE 1 = 1
<![CDATA[AND T.OPERATION_TIME > #{beginTime}
AND T.OPE_DATE < #{endTime}
AND T.USER_NAME = #{roleName}]]>
</select>