Chart.js实现饼图

页面：

引入静态脚本：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="https://code.highcharts.com/highcharts.js"></script>

或下载脚本：

 <script src="@Url.Content("~/Scripts/HighChart/highcharts.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/HighChart/exporting.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/HighChart/grid.js")" type="text/javascript"></script>
  <script type="text/javascript">

   $(document).ready(function () {

 $(function () {

                showPieChart();
            });

 });

        function showPieChart() {

            var url = "@HttpContext.Current.Request.ApplicationPath" == "/" ? "" : "@HttpContext.Current.Request.ApplicationPath";
            $.ajaxSetup({
                cache: false
            });
            $.ajax({
                type: 'get',
                url: 'http://' + "@HttpContext.Current.Request.Url.Authority" + url + '/Approve/getDateToChart',
                async: false,
                dataType: 'json',

                contentType: 'application/json; charset=utf-8',

                success: function (data1) {
                    debugger;
                    var arr = new Array();

                    for (i in data1) {

                        var a = data1[i];
                        var value = [a.colName + " (@Resources.ApproveListResource.count:" + a.count + ") ", a.percent]
                        arr.push(value);

                    }

                    var chart1 = new Highcharts.chart('container', {
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            borderWidth: 0,
                            type: 'pie'
                        },
                        title: {
                            text: '@Resources.ApproveListResource.prWatingApproval'
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        credits: {
                            enabled: false
                        },
                        exporting: {
                            enabled: false
                        },

                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        fontSize: "13px",
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                }
                            }
                        },
                        series: [{
                            name: 'Brands',
                            colorByPoint: true,
                            data: arr
                        }]

                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    swal(errorThrown);
                }
            });
        }

后台：

[HttpGet]
        public ActionResult getDateToChart()
        {
            CultureInfo usCulture = Thread.CurrentThread.CurrentUICulture;
            ViewBag.lang = usCulture.Name == "zh-TW" ? "zh-hk" : "en-US";
            string lang = ViewBag.lang;
            string dataChart = "";
            DataTable dtList = new DataTable();
            dtList = approve.waitingApprovalList(badge);
            DataRow[] drPR = dtList.Select();
            List<PieChartModel> compList = new List<PieChartModel>();
            List<string> allComp=new List<string>();
            for (int i = 0; i < drPR.Length; i++)
            {
                string comp = drPR[i]["comp_code"].ToString().Trim();
                allComp.Add(comp);
            }
            List<string> distinctComp = allComp.Distinct().ToList();
            int distinctCompCount = 0;
            foreach(var c in distinctComp)
            {
                int count = 0;
                distinctCompCount++;
                for (int j = 0; j < drPR.Length; j++)
                {
                    string comp = drPR[j]["comp_code"].ToString().Trim();
                    if(comp == c)
                    {
                        count++;
                    }
                }
                PieChartModel p = new PieChartModel();
                p.colName = c;
                p.count = count;
                p.percent = Convert.ToDouble(count) / Convert.ToDouble(drPR.Length);
                p.percent *= 100;
               
                compList.Add(p);
                //if (distinctCompCount == 1)
                //    dataChart = "[";
                //dataChart += "{name: '" + p.colName + "(PR:" + p.count + ")',y:" + p.percent + ",sliced: true,selected: true} ";
                //if (distinctCompCount != distinctComp.Count)
                //    dataChart += ",";
                //else
                //    dataChart += "]";
                //{
                //                name: 'Microsoft Internet Explorer',
                //                y: 56.33
                //            }, {
                //                name: 'Chrome',
                //                y: 24.03,
                //                sliced: true,
                //                selected: true
                //            }, {
                //                name: 'Firefox',
                //                y: 10.38
                //            }, {
                //                name: 'Safari',
                //                y: 4.77
                //            }, {
                //                name: 'Opera',
                //                y: 0.91
                //            }, {
                //                name: 'Proprietary or Undetectable',
                //                y: 0.2
                //            }
            }

            return Json(compList, JsonRequestBehavior.AllowGet);

        }