@{ 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>