<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/exporting.js"></script>
<script type="text/javascript" src="../js/highcharts-zh_CN.js"></script>
js代码
$(function(){
$.ajax({
type : "post",
url :basePath+'/selectDefectTypeProportionAll.json',
dataType : "json",
success : function(data) {
// 构建图表
$('#container').highcharts({
//图表配置
chart: {
//绘图区背景色
plotBackgroundColor: null,
//绘图区边框宽度
plotBorderWidth: null,
//绘图区阴影
plotShadow: false
},
//标题
title: {
text: '缺陷分类占比'
},
//数据提示框：指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置 tooltip.enabled = false 即可不启用提示框。
tooltip: {
//在工具提示中，点的线的HTML。变量由花括号括起来。可用的变量。x点。y,series.name和系列。颜色和其他属性在同一窗体上。此外,点。工具提示可以扩展y。valuePrefix和工具提示。valueSuffix变量。对于每个系列，这也可以被重写，这使得它成为显示单元的好钩子。在样式模式中，点被一个类名而不是点颜色所着色。
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
//数据列配置
plotOptions: {
//饼图
pie: {
//是否允许选中点
allowPointSelect: true,
//光标形状：指定鼠标滑过数据列时鼠标的形状。当绑定了数据列点击事件时，可以将此参数设置为 "pointer"，用来提醒用户改数据列是可以点击的。
cursor: 'pointer',
//数据标签
dataLabels: {
//启用或禁用数据标签。
enabled: true,
//数据标签的格式字符串。可用的变量是相同的。
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
//标签的样式
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
//将数据标签连接到饼片的线的颜色。默认颜色与点的颜色相同。在样式模式中，连接器行程是在.highcharts-data- data-label-connector类中给出的。
connectorColor: 'silver'
}
}
},
//数据列
//默认选着
/* {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, */
series: [{
//一个饼系列
type: 'pie',
name: '缺陷占比',
data: data
}]
});
}
});
HTML代码
<div id="container" style="min-width:400px;height:400px"></div>
Controller层
@RequestMapping("selectDefectTypeProportionAll")
public String selectDefectAllocationAll() throws Exception{
System.err.println(" 缺陷分类占比请求成功...............");
String data=defectTypeProportionService.selectDefectAllocationAll();
return data;
}
Service层
public String selectDefectAllocationAll() {
//查询缺陷分类数据
List<DefectTypeProportionPo> list=defectTypeProportionDao.selectDefectAllocationAll();
//创建一个list集合
List<DefectTypeProportionParameterPo> dpTypeJsons = new ArrayList<DefectTypeProportionParameterPo>();
//遍历数据
for (DefectTypeProportionPo defectTypeProportionPo : list) {
//得到每个数据的总数
Long count = (Long) defectTypeProportionPo.getIssueId().longValue();
//给参数对象赋值
dpTypeJsons.add(new DefectTypeProportionParameterPo(defectTypeProportionPo.getTypeDesc(),count));
}
//把这个list集合转换成json
String jsonText = JsonUtil.list2json(dpTypeJsons);
return jsonText;
}
xml层
<select id="selectDefectAllocationAll" resultType="com.huibo.project.po.DefectTypeProportionPo">
select
count(*) as issueId,
b.TYPE_DESC as typeDesc
from
i_issue_base_info as a
left join I_ISSUE_TYPE as b on a.ISSUE_TYPE=b.TYPE_CODE
group by ISSUE_TYPE
</select>
$(function(){/* $.ajax({ type : "post", url :basePath+'/selectDefectTypeProportionAll.json', dataType : "json", success : function(data) { var data = data;new iChart.Pie2D({//渲染的Dom目标,canvasDiv为Dom的IDrender : 'canvasDiv',//绑定数据data: data,//设置标题title : '缺陷分类占比',//图例的配置项.legend : {enable : true},//是否显示为百分比值。(默认为false)showpercent:true,//百分比小数点精度(小数点后几位)。(默认为 1)decimalsnum:2,//图表的宽度width : 1105,//图表的高度height : 450,//指定饼图的半径radius:140}).draw();//调用绘图方法开始绘图 }}); */ $.ajax({ type : "post", url :basePath+'/selectDefectTypeProportionAll.json', dataType : "json", success : function(data) { // 构建图表 $('#container').highcharts({ //图表配置 chart: { //绘图区背景色 plotBackgroundColor: null, //绘图区边框宽度 plotBorderWidth: null, //绘图区阴影 plotShadow: false }, //标题 title: { text: '缺陷分类占比' }, //数据提示框：指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置 tooltip.enabled = false 即可不启用提示框。 tooltip: { //在工具提示中，点的线的HTML。变量由花括号括起来。可用的变量。x点。y,series.name和系列。颜色和其他属性在同一窗体上。此外,点。工具提示可以扩展y。valuePrefix和工具提示。valueSuffix变量。对于每个系列，这也可以被重写，这使得它成为显示单元的好钩子。在样式模式中，点被一个类名而不是点颜色所着色。 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, //数据列配置 plotOptions: { //饼图 pie: { //是否允许选中点 allowPointSelect: true, //光标形状：指定鼠标滑过数据列时鼠标的形状。当绑定了数据列点击事件时，可以将此参数设置为 "pointer"，用来提醒用户改数据列是可以点击的。 cursor: 'pointer', //数据标签 dataLabels: { //启用或禁用数据标签。 enabled: true, //数据标签的格式字符串。可用的变量是相同的。 format: '<b>{point.name}</b>: {point.percentage:.1f} %', //标签的样式 style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' }, //将数据标签连接到饼片的线的颜色。默认颜色与点的颜色相同。在样式模式中，连接器行程是在.highcharts-data- data-label-connector类中给出的。 connectorColor: 'silver' } } }, //数据列 //默认选着 /* { name: 'Chrome', y: 12.8, sliced: true, selected: true }, */ series: [{ //一个饼系列 type: 'pie', name: '缺陷占比', data: data }] }); }});
浙公网安备 33010602011771号