Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法

一.提示标签重叠解决方法:

 series: [{
                    startAngle:90,//添加这个属性,就可以解决
                    type: 'pie',
                    name: '充值方式'
                }]

不知道为什么,上述方法不行了。第一次试还可以,很无语。。。。。。

二,数据绑定

数据集:

拼成json:

 1  public string GetRechargeTypeList()
 2        {
 3            var dt = dal.GetRechargeTypeList();
 4            string json = "[";
 5            foreach (DataRow dr in dt.Rows)
 6            {
 7                if (dr["RechargeType"].ToString().Equals("0"))
 8                {
 9                    json += "['其他'," + dr["TotalMoney"] + "],";
10                }
11                else if (dr["RechargeType"].ToString().Equals("1"))
12                {
13                    json += "['定点人工'," + dr["TotalMoney"] + "],";
14                }
15                else if (dr["RechargeType"].ToString().Equals("2"))
16                {
17                    json += "['银联自助'," + dr["TotalMoney"] + "]";
18                }
19            }
20            return json + "]";
21        }

生成饼图:

function CreateCharts() {
            var options = {
                colors: ['#46cbee', '#fec157', '#e57244', '#cfd17d', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], //不同组数据的显示背景色,循环引用 
                chart: {
                    renderTo: 'RechargeCharts',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '卡片充值渠道分析'
                },
                tooltip: {
                    pointFormat: '充值总额¥{point.y}'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    startAngle:90,
                    type: 'pie',
                    name: '充值方式'
                }]
            };
            $.post('RechargeRecord.aspx?LoadAjaxData=GetRechargeTypeList&id=' + Math.random(), function (data) {
                options.series[0].data = eval(data);
                $('#RechargeCharts').highcharts(options);
            }, 'text');
原文地址:https://www.cnblogs.com/Archosaur/p/Highcharts.html