第一次发的是折线图,现在做了一个柱状图,代码基本上差不多,下面是前台代码,后台代码参考折线图文章:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: '10000号实时监控系统'
},
subtitle: {
text: '话务预测分析'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: '数值'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 20,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return '技能组:'+
this.x +'</br>值:'+ this.y +' 个';
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '排班量'
}, {
name: '话务量'
}, {
name: '接通量'
}]
};
var url = "<%=basePath%>/singins.do?method=getDataToColumnJson";
$.ajax({
url: url,
type: "post",
cache: false,
dataType: "json",
data: {},
ifModified: false,
success: function(result){
var paiBan = [];
var huaWu = [];
var jieTong = [];
jQuery.each(result, function(m, obj) {
paiBan.push(
parseInt(obj.value0)
);
huaWu.push(
parseInt(obj.value1)
);
jieTong.push(
parseInt(obj.value2)
);
});
options.series[0].data = paiBan;
options.series[1].data = huaWu;
options.series[2].data = jieTong;
chart = new Highcharts.Chart(options);
}
});
});
});
window.returnValue='true';
</script>
</head>
<body>
<script src="<%=path%>/js/highcharts.js"></script>
<script src="<%=path%>/js/modules/exporting.js"></script>
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
- 大小: 75.9 KB
分享到:
相关推荐
• 支持大部分的图表类型:柱状图,直线图,曲线图、区域图、区域曲线图、饼装图、散布图等; • 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有...
* 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; * 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a ...
Highcharts是一个制作图表的Javascript类库,可以制作的图表有:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等
•支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; •跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a ...
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图
纯JS,无BS支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;PHP、Asp.net还是Java都可以使用highcharts.js还有IE和Jquery类库或者MooTools类库;提示功能:鼠标移动到图表的某...
柱状图、折线图、饼状图 等图表插件, 主要采用两个js,jquery-1.5.2.min 和 highcharts 在theme中包含四种js是四种颜色样式,defaultSeriesType:为图表类型属性,主要包含8种,分别为 line折线图, spline曲线图,...
本程序主要把echats和highcharts的基本图形进行了简单的绘制,有部分数据是写死的。如果关于从后台获取数据方面有问题,请直接私信。
• 支持大部分的图表类型:柱状图,直线图,曲线图、区域图、区域曲线图、饼装图、散布图等; • 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有...
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。 // jQuery,注意 Highcharts 4.2 ...
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。 // jQuery,注意 Highcharts 4.2 ...
支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;跨语言:不管是PHP、.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas ...
在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图、饼状图、曲线图的都体现出来,即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重。Highcharts可以...
支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼状图、散布图;跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas ...
Highcharts 强大的jQuery图表制作功能 Highcharts是一个制作图表的Javascript类库,主要特性: 1、提示功能:鼠标移动到图表的某一点上有提示信息 2、放大功能:选中图表部分放大,近距离观察图表 3、对个人用户...
支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a ...
•支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; •跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a ...
纯JS的图表插件,效果非常绚丽。只要提供JSON数据,JS自动生成图表,柱状、曲线图、饼图等。
支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcha rts.js,还有a ...