利用HighCharts 显示饼图

利用HightCharts显示饼图,主要有以下几个主要注意点:


1、百分比格式,精确到小数点几位:

Highcharts.numberFormat(this.percentage, 2) //2表示精确到小数点后2位


2、series的data格式 [名称,值]的JSON格式序列

[

  [IE浏览器,200],

  [Firefox浏览器,300],

  [傲游,40],

  [Safari,50]

]


3、点击饼图事件,弹出提示及页面跳转

$(function ({
    var chart new Highcharts.Chart({
        chart{
            renderTo'container'
        },
        xAxis{
            categories['Jan''Feb''Mar''Apr''May''Jun''Jul''Aug''Sep''Oct''Nov''Dec']
        },
        
        plotOptions{
            series{
                cursor'pointer',
                events{
                    clickfunction(event{
                        alert(this.name +' clicked\n'+
                              'Alt: 'event.altKey +'\n'+
                              'Control: 'event.ctrlKey +'\n'+
                              'Shift: 'event.shiftKey +'\n');

                        location.href='http://www.baidu.com';  //页面跳转
                    }
                }

            }
        },
        
        series[{
            data[29.971.5106.4129.2144.0176.0135.6148.5216.4194.195.654.4],

            events: {
                        click: function (e) {

                         alert(e.point.name); //弹出提示

                         location.href='http://www.baidu.com';  //页面跳转

                   }

              }
        }]
    });
});


[csharp]  view plain copy
  1.         <div style="width: 97%; height: 400; margin: 5px" id="tb2" runat="server">  
  2.             <div id="container2" style="width: 95%; height: 400px; margin: 20,5,10,10;">  
  3.             </div>  
  4.         </div>  
  5.         <div style="display: none;">  
  6.             <input type="text" id="d_nf2" runat="server" />  
  7.             <input type="text" id="d_p1" runat="server" />  
  8.         </div>  
  9.         <script language="javascript" type="text/javascript">  
  10.             var chart;  
  11.             $(document).ready(function () {  
  12.                 var xdata = eval($("#d_nf2").val());  
  13.                 var ydata1 = eval($("#d_p1").val());  
  14.                 chart = new Highcharts.Chart({  
  15.                     chart: {  
  16.                         renderTo: 'container2',  
  17.                         plotBackgroundColor: null,  
  18.                         plotBorderWidth: null,  
  19.                         plotShadow: false  
  20.                     },  
  21.                     title: {  
  22.                         text: '地表水资源量饼图'  
  23.                     },  
  24.                     credits: {  
  25.                         enabled: false  
  26.                     },  
  27.                     exporting: {  
  28.                         enabled: false  
  29.                     },  
  30.                     tooltip: {  
  31.                         formatter: function () {  
  32.                             return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) + ' %';  
  33.                         }  
  34.                     },  
  35.                     plotOptions: {  
  36.                         pie: {  
  37.                             allowPointSelect: true,  
  38.                             cursor: 'pointer',  
  39.                             showInLegend: true,  
  40.                             dataLabels: {  
  41.                                 enabled: true,  
  42.                                 color: Highcharts.theme.textColor || '#000000',  
  43.                                 connectorColor: Highcharts.theme.textColor || '#000000',  
  44.                                 formatter: function () {  
  45.                                     return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) + ' %';  
  46.                                 }  
  47.                             }  
  48.                         }  
  49.                     },  
  50.                     series: [{  
  51.                         type: 'pie',  
  52.                         name: '地表水资源量',  
  53.                         data: ydata1 //这个序列之,从后台数据库读取并动态拼凑该JSON序列串  
  54.                     }]  
  55.                 });  
  56.             });  
  57.         </script>  
  58.     </radTS:PageView>  
  59. </radTS:RadMultiPage>  
  60. /div>  
 简单的demo效果图如下:

利用HighCharts 显示饼图_第1张图片

你可能感兴趣的:(利用HighCharts 显示饼图)