HighCharts 饼图

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section PageSpecificJavascriptIncludes{
    <script src="~/Assets/Highcharts-4.1.8/js/highcharts.js"></script>
   <script src="~/Assets/Highcharts-4.1.8/js/themes/grid.js"></script>
    <script type="text/javascript">
  
        Highcharts.setOptions({
            yAxis: {
                gridLineDashStyle: 'ShortDot',
                gridLineColor: '#FFB5B5',
                tickWidth: 1,
                tickColor: '#FFB5B5',
                tickPosition: 'inside'

            },
            xAxis: {
                lineColor: '#333',
                lineWidth: 2,
                tickPosition: 'inside',
                tickColor: '#888888',
                tickLength: 5
            },

        });
        $(function () {
            donateChart(new Date().getFullYear());

            $("#year").change(function () {
                var year = $(this).val();
                console.log(year);
                if (year != "") {
                    donateChart(year);
                }
            });
        });
        function donateChart(year) {
            //X
            var categories = [];
            //Y
            var db=[,]
            var datas = [];
            var dbdata = [,];
            var url = "@Url.Action("GetData","StatisticAnalysis")";
            var param = new Object();
            //param.id = year;
            $.z_ajaxAction(url, param, function (result) {
                var obj = result;          
                var length = obj.length;
                for (var i = 0; i < length; i++)
                {
                    //类型
                    categories[i] = obj[i].Type;
                    //比例
                    datas[i] = parseInt(obj[i].Proportion);
                    //数组
                    db[i] = [categories[i], datas[i]]
                }
            
                createChart(categories, db, year);
            });

      
        }

        function createChart(categories, db, year) {

            new Highcharts.Chart({
                chart: {
                    renderTo: "container1",
                    backgroundColor: null,
                    spacingRight: 20
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: year+'年销售收入比例构成',
                   
                    y: 10
                },
                colors: [
                    '#0088cc',
                    '#5CB85C',
                   ' #FFB5B5',
                   '#FF2D2D',
                   '#FFFF37',
                   '#C07AB8'
                ],

                xAxis: {
                    categories: categories,

                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
            
                series: [{
                    name: '比例',
                   data: db,
                    type: 'pie',
                    tooltip: {
                        valueSuffix: '%'
                    }
                }
                ]
            });
        }
    </script>
    
    
    
    }
 <div id="container1" style="height: 300px;max-500px">

 </div>    
<select id="year">
    <option value="">选择年份</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
</select>
原文地址:https://www.cnblogs.com/lk-kk/p/4797183.html