1. 公司需要做个饼图显示数据, jquery图表插件里就选了这个,确实还不错, 纠结挺久的就是前台接收返回的JSON字段.
代码:
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
backgroundColor: null,
plotBorderWidth: 0, //内边框
borderWidth: 0, //外边框
defaultSeriesType: 'pie' //图表类型
},
title: {
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true, //点击切换
cursor: 'pointer',
size: 300,
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) + ' %';
}
},
showInLegend: true
}
},
defaultSeriesType: 'pie' pie代表饼图,也有其余多种图形供选择,自己设置就是,
borderWidth: 0, 不设饼图外层会多一个框.
Hightcharts.numberFormat(this.percentage,2)+'%' 代表接收值的字符精度. 因为要显示个百分比.
下面是后台返回的数据:
double sum = 0;
double num = 0;
try
{
var json = bll_BaseInfo.GetSchoolTIDNum();
foreach (var item in json)
{
sum += item.TE_IDS;
}
Dictionary<string, double> dic = new Dictionary<string, double>();
foreach (var i in json)
{
i.TSNum = Convert.ToDouble(i.TE_IDS) / sum * 100;
dic.Add(i.TS_NAME, i.TSNum);
}
return Json(dic, JsonRequestBehavior.AllowGet);
}
第一行sum声明的是double类型,如果用int类型声明那么 i.TSNum = Convert.ToDouble(i.TE_IDS) / sum * 100; 返回结果永远为0.
这类型间的基础问题没注意到调试很久.
前台接收:
$(document).ready(function () {
getForm();
});
});
function getForm() {
$.ajax({
type: "post",
url: "CustomManager/GetSchoolTid",
dataType: "json",
success: function (dic) {
var js = [];
$.each(dic, function (i, j) {
js.push([i, j]);
})
chart.series[0].setData(js);
}
})
}
开始返回的JSON格式都让饼图显示错误或出不来. 它这里需要用这种方式.
var js = [];
$.each(dic, function (i, j) {
js.push([i, j]);
})