zoukankan      html  css  js  c++  java
  • 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');
  • 相关阅读:
    计算机三级数据库-指导
    spring导入约束
    hibernater获取session时org.hibernate.service.spi.ServiceException错误
    springxml配置注入报错
    右键复制类的完整路径
    关于实体里的toString方法
    idea创建web项目环境
    框架快速找类
    如何在scdn博客里搜索自己博客文章
    永久消除自动产生的QQPCMgr
  • 原文地址:https://www.cnblogs.com/Archosaur/p/Highcharts.html
Copyright © 2011-2022 走看看