highcharts的用法

<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            }]        });   }});