（五）、利用HighCharts 显示饼图

最新推荐文章于 2025-06-06 10:17:49 发布

原创最新推荐文章于 2025-06-06 10:17:49 发布 · 1.9w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#function #events #server #safari #javascript #浏览器

.NET 图表专区专栏收录该内容

14 篇文章

订阅专栏

利用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: {
  click: function(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.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

events: {
click: function (e) {

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

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

}

              }
  }]
  });
});

                <div style="width: 97%; height: 400; margin: 5px" id="tb2" runat="server">
                    <div id="container2" style="width: 95%; height: 400px; margin: 20,5,10,10;">
                    </div>
                </div>
                <div style="display: none;">
                    <input type="text" id="d_nf2" runat="server" />
                    <input type="text" id="d_p1" runat="server" />
                </div>
                <script language="javascript" type="text/javascript">
                    var chart;
                    $(document).ready(function () {
                        var xdata = eval($("#d_nf2").val());
                        var ydata1 = eval($("#d_p1").val());
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container2',
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false
                            },
                            title: {
                                text: '地表水资源量饼图'
                            },
                            credits: {
                                enabled: false
                            },
                            exporting: {
                                enabled: false
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) + ' %';
                                }
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    showInLegend: true,
                                    dataLabels: {
                                        enabled: true,
                                        color: Highcharts.theme.textColor || '#000000',
                                        connectorColor: Highcharts.theme.textColor || '#000000',
                                        formatter: function () {
                                            return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) + ' %';
                                        }
                                    }
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: '地表水资源量',
                                data: ydata1 //这个序列之，从后台数据库读取并动态拼凑该JSON序列串
                            }]
                        });
                    });
                </script>
            </radTS:PageView>
        </radTS:RadMultiPage>
    </div>

简单的demo效果图如下：