MVC3+highcharts实现饼图

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]);
            })



  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在JavaScript中使用Highcharts实现3D饼图,你需要按照以下步骤进行配置和使用: 1. 首先,确保你已经引入了Highcharts库。你可以在HTML文件中通过使用`<script>`标签来引入Highcharts库的JavaScript文件。 2. 创建一个HTML容器来显示你的图表。在HTML文件中,你可以使用一个空的`<div>`元素,并为其指定一个唯一的ID,例如`<div id="chart-container"></div>`。这将是你的3D饼图的容器。 3. 在JavaScript文件中,你需要使用Highcharts的配置对象来定义你的3D饼图的设置。你可以通过创建一个名为`options`的对象来实现这一点。在`options`对象中,你可以指定图表的类型为`pie`,并设置`options.chart`属性为`{ type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }`以启用3D效果。 4. 在`options.series`属性中,你可以指定饼图的数据。每个数据点都是一个对象,包含`name`和`y`属性,分别表示数据点的名称和值。 5. 最后,你需要使用`Highcharts.chart`函数将图表绘制到指定的容器中。在JavaScript文件中,使用以下代码来创建和绘制3D饼图:`Highcharts.chart('chart-container', options);`。其中,`'chart-container'`是你在第2步中指定的容器的ID。 通过按照上述步骤进行配置和使用,你就能够在JavaScript中实现3D饼图的效果了。记得在绘制图表之前,确保你已经引入了Highcharts库,并正确配置了相关的设置和数据。<span class="em">1</span> #### 引用[.reference_title] - *1* [在Vue中使用highCharts绘制3d饼图的方法](https://download.csdn.net/download/weixin_38656609/13206251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值