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 = new ArrayList(), m_value = 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 = 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 = 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 = HighList.ToArray() });
 81                 ChartData.Add(new { name = "Center", color = "#AD741A", data = CenterList.ToArray() });
 82                 ChartData.Add(new { name = "Low", color = "#B6A91D", data = LowList.ToArray() });
 83                 ChartData.Add(new { name = "Low1", color = "#5B9823", data = LowList1.ToArray() });
 84                 ChartData.Add(new { name = "Low2", color = "#166D1F", data = LowList2.ToArray() });
 85                 }
 86              return Json(new { result = true, y_value = 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 //center
121             },
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‘,                //标签的水平位置，水平居左,默认是水平居中center
172                         style: {
173                             color: ‘#166D1E‘,
174                         },
175                         y: 595,                      //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
176                         rotation: 0
177 
178                     }
179                 }],
180 
181                 gridLineColor: ‘rgb(62, 76, 83)‘,
182                 gridLineWidth: 1
183             },
184             legend: {
185                 enabled: false
186             },
187             credits: {
188                 enabled: false
189             },
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 = 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 = y_value;
233             }
234         });
235     }
236     function create(options) {
237         new Highcharts.Chart(options);
238     }
239     
240 }
241 
242 //html
243  <div id="chart" style="height: 470px;">
244                 </div>