一.提示标签重叠解决方法:
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');