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