首页 > 代码库 > highcharts 条形图

highcharts 条形图

  1  /// <summary>  2         /// 获取图表chart  3         /// </summary>  4         /// <returns></returns>  5         public JsonResult GetChartInfo()  6         {             7             try  8             {  9                 var maxDates = oIResearchRepository.GetEmpolderOperationInfo().OrderByDescending(c => c.DateMonth).FirstOrDefault(); 10                 string maxDate = string.Empty; 11                 //获取Chart图 12                 ArrayList ChartData = http://www.mamicode.com/new ArrayList(), m_value = http://www.mamicode.com/new ArrayList(), Head = new ArrayList(), DataLabel = new ArrayList(), HighList = new ArrayList(), CenterList = new ArrayList(), LowList = new ArrayList(), LowList1 = new ArrayList(), LowList2 = new ArrayList(); 13                 Double y_value = http://www.mamicode.com/0; 14                 if (maxDates!=null) 15                 { 16                   maxDate = maxDates.DateMonth; 17                 18                 List<COST_EMPOLDER_OPERATION> list = oIResearchRepository.GetEmpolderOperationInfo().Where(x => x.DateMonth == maxDate).ToList(); 19                 //List<WYGetMainVersionDeskInfoProcClass> list = oIResearchRepository.GetWYMainVersionDeskInfoList().ToList(); 20                 21                 var chartList = list.OrderByDescending(x => x.BudgetExecuteRate).ToList(); 22                 var month = maxDate.ToDateTime().Value.Month ; 23                 var _monthPercent = ((Double)month )/ 12 * 100; 24                 y_value = http://www.mamicode.com/Math.Round((Double)_monthPercent, 1); 25                 Int32 m = (Int32)oIResearchRepository.GetEmpolderOperationInfo().OrderByDescending(c => c.BudgetExecuteRate).FirstOrDefault().BudgetExecuteRate; 26                 Int32 mm = ((Int32)(m / 10)) + 1; 27                 if(mm>1) 28                 { 29                     for (int i = 0; i <= mm;i++ ) 30                     {                   31                         m_value.Add(i*10); 32                     } 33                 } 34                 foreach (var item in chartList) 35                 { 36                     Head.Add(ConvUtils.ToString(item.Unit)); 37                     string tt = "<span>" + ConvUtils.ToString(item.MonthAddUp) + "<font style=‘color:#1E526A;font-size:10px;‘>/" + ConvUtils.ToString(item.FullYearBudget) + "</font></span>"; 38                     DataLabel.Add(tt); 39                     if (Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate)) >= 60) 40                     { 41                         HighList.Add(Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate))); 42                         CenterList.Add(null); 43                         LowList.Add(null); 44                         LowList1.Add(null); 45                         LowList2.Add(null); 46                     } 47                     else if (Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate)) < 60 && Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate)) >= 50) 48                     { 49                         HighList.Add(null); 50                         CenterList.Add(Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate))); 51                         LowList.Add(null); 52                         LowList1.Add(null); 53                         LowList2.Add(null); 54                     } 55                     else if (Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate)) < 50 && Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate)) >= 40) 56                     { 57                         HighList.Add(null); 58                         CenterList.Add(null); 59                         LowList.Add(Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate))); 60                         LowList1.Add(null); 61                         LowList2.Add(null); 62                     } 63                     else if (Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate)) < 40 && Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate)) >= 30) 64                     { 65                         HighList.Add(null); 66                         CenterList.Add(null); 67                         LowList.Add(null); 68                         LowList1.Add(Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate))); 69                         LowList2.Add(null); 70                     } 71                     else 72                     { 73                         HighList.Add(null); 74                         CenterList.Add(null); 75                         LowList.Add(null); 76                         LowList1.Add(null); 77                         LowList2.Add(Double.Parse(ConvUtils.ToString(item.BudgetExecuteRate))); 78                     } 79                 } 80                 ChartData.Add(new { name = "High", color = "#CC4B12", data =http://www.mamicode.com/ HighList.ToArray() }); 81                 ChartData.Add(new { name = "Center", color = "#AD741A", data =http://www.mamicode.com/ CenterList.ToArray() }); 82                 ChartData.Add(new { name = "Low", color = "#B6A91D", data =http://www.mamicode.com/ LowList.ToArray() }); 83                 ChartData.Add(new { name = "Low1", color = "#5B9823", data =http://www.mamicode.com/ LowList1.ToArray() }); 84                 ChartData.Add(new { name = "Low2", color = "#166D1F", data =http://www.mamicode.com/ LowList2.ToArray() }); 85                 } 86              return Json(new { result = true, y_value = http://www.mamicode.com/y_value, m_value = m_value.ToArray(), head = Head.ToArray(), chartData = ChartData.ToArray(), datalabel = DataLabel.ToArray() }); 87             88             } 89             catch (System.Exception ex) 90             { 91                 return Json(new { result = "error" }); 92             } 93         } 94  95  96 //js 97 //显示图表信息 98 function ShowChartsInfo() { 99     /// <summary>100     /// 获取图表信息101     /// </summary>106     function getOptions(y_value, temp, m_value) {107         var options = {108             chart: {109                 renderTo: chart,110                 type: bar,111                 backgroundColor: rgba(0,0,0,0), //透明背景112                 plotBackgroundColor: null,113                 plotBorderWidth: null,114                 animation: false,115                 colors: [#FFF, #50B432, #ED561B, #DDDF00, #24CBE5, #64E572, #FF9655, #FFF263, #6AF9C4]116             },117             title: {118                 enabled: false,119                 text: ‘‘,120                 x: -20 //center121             },122             xAxis: [123                 {124                     tickColor: #FEFEFC,125                     categories: [],126                     labels: {  //设置X轴坐标的文字127                         style: {128                             font: bold 12px Arial,129                             color: "#FEFEFC"130                         }131                     }132                 }],133             yAxis: {134                 title: {135                     text: ‘‘,136                     style: {137                         color: #C7B64A138                     }139                 },140                 stackLabels: {141                     enabled: true,142                     style: {143                         fontWeight: bold,144                         color: (Highcharts.theme && Highcharts.theme.textColor) || white145                     },146                     //在堆叠柱形图或柱形图中,堆叠标签显示柱形图每个柱形的总值。标签位于正柱形的上方和负柱形的下方。如果图表是转置过的,则位于正柱形的右侧和负柱形的左侧。147                     formatter: function () {148                         return temp[this.x];149                         //if (temp[this.x] != "undefined") {150                         //    return ‘<span>‘ + temp[this.x].split(‘/‘)[0] + ‘<font style="color:#1E526A;font-size:10px;">/‘ + temp[this.x].split(‘/‘)[1] + ‘</font></span>‘;151                         //}152                     }153                 },154                 lineWidth: 1,155                 lineColor: #9C9A9D,156                 labels: {157                     formatter: function () {//设置纵坐标值的样式 158                         return this.value + "%";159                     },160                     style: {161                         color: #FEFEFC162                     }163                 },164                 tickPositions: m_value,165                 plotLines: [{166                     value: y_value,167                     width: 3,168                     color: #EE1127,169                     label: {170                         text: y_value + %,     //标签的内容171                         align: center,                //标签的水平位置,水平居左,默认是水平居中center172                         style: {173                             color: #166D1E,174                         },175                         y: 595,                      //标签相对于被定位的位置水平偏移的像素,重新定位,水平居左10px176                         rotation: 0177 178                     }179                 }],180 181                 gridLineColor: rgb(62, 76, 83),182                 gridLineWidth: 1183             },184             legend: {185                 enabled: false186             },187             credits: {188                 enabled: false189             },190             plotOptions: {191                 series: {192                     stacking: normal193                 },194                 bar: {195                     dataLabels: {196                         enabled: true,197                         align: "left",198                         color: white,199                         formatter: function () {200                             if (this.y != null)201                                 return this.y + %202                         }203                     }204                 }205 206             },207             //tooltip: {208             //    formatter: function () {209             //        return true;210             //    } 211             //},212             series: []213         };214         return options;215     }216     this.getData =http://www.mamicode.com/ function () {217         $.ajax({218             url: "/ResearchRate/GetChartInfo",219             data: {},220             type: "POST",221             dataType: "json",222             async: false,223             success: function (jdata, stat) {224                 //debugger;225                 //图的X轴226                 var options = getOptions(jdata.y_value, jdata.datalabel, jdata.m_value);227                 options.xAxis[0].categories = jdata.head;228                 //图的Y轴229                 options.series = jdata.chartData;230                 //temp = jdata.datalabel;231                 create(options);232                 //y_value = http://www.mamicode.com/y_value;233             }234         });235     }236     function create(options) {237         new Highcharts.Chart(options);238     }239     240 }241 242 //html243  <div id="chart" style="height: 470px;">244                 </div>