首页 > 代码库 > 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: ‘#C7B64A‘138 }139 },140 stackLabels: {141 enabled: true,142 style: {143 fontWeight: ‘bold‘,144 color: (Highcharts.theme && Highcharts.theme.textColor) || ‘white‘145 },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: ‘#FEFEFC‘162 }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: ‘normal‘193 },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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。