diff --git a/app/views/quality_analysis/_show.html.erb b/app/views/quality_analysis/_show.html.erb index 46a5e2e3d..17865ad32 100644 --- a/app/views/quality_analysis/_show.html.erb +++ b/app/views/quality_analysis/_show.html.erb @@ -8,6 +8,123 @@ <p>class_complexity: <%= @complexity["msr"][7]["frmt_val"] %></p> <p>function_complexity: <%= @complexity["msr"][8]["frmt_val"] %></p> +<script> + $(function () { + + $('#container_complex').highcharts({ + + chart: { + type: 'gauge', + plotBackgroundColor: null, + plotBackgroundImage: null, + plotBorderWidth: 0, + plotShadow: false + }, + + title: { + text: 'Speedometer' + }, + + pane: { + startAngle: -150, + endAngle: 150, + background: [{ + backgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0, '#FFF'], + [1, '#333'] + ] + }, + borderWidth: 0, + outerRadius: '109%' + }, { + backgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0, '#333'], + [1, '#FFF'] + ] + }, + borderWidth: 1, + outerRadius: '107%' + }, { + // default background + }, { + backgroundColor: '#DDD', + borderWidth: 0, + outerRadius: '105%', + innerRadius: '103%' + }] + }, + + // the value axis + yAxis: { + min: 0, + max: 200, + + minorTickInterval: 'auto', + minorTickWidth: 1, + minorTickLength: 10, + minorTickPosition: 'inside', + minorTickColor: '#666', + + tickPixelInterval: 30, + tickWidth: 2, + tickPosition: 'inside', + tickLength: 10, + tickColor: '#666', + labels: { + step: 2, + rotation: 'auto' + }, + title: { + text: 'km/h' + }, + plotBands: [{ + from: 0, + to: 120, + color: '#55BF3B' // green + }, { + from: 120, + to: 160, + color: '#DDDF0D' // yellow + }, { + from: 160, + to: 200, + color: '#DF5353' // red + }] + }, + + series: [{ + name: 'Speed', + data: [80], + tooltip: { + valueSuffix: ' km/h' + } + }] + + }, + // Add some life + function (chart) { + if (!chart.renderer.forExport) { + setInterval(function () { + var point = chart.series[0].points[0], + newVal, + inc = Math.round((Math.random() - 0.5) * 20); + + newVal = point.y + inc; + if (newVal < 0 || newVal > 200) { + newVal = point.y - inc; + } + + point.update(newVal); + + }, 3000); + } + }); + }); +</script> @@ -23,7 +140,7 @@ <p class="fontGrey3 mt15">质量等级</p> <p class="fontBlue2 pr">A<span class="f8 c_white analysis-genral-icon b_green2 borderRadius">正常</span></p> </div> - <div class="analysis-genral"><img src="images/homepageImage.jpg" width="90" class="image-cir" /> + <div class="analysis-genral" id="container_complex"> <p class="fontGrey3 mt15">复杂度</p> <p class="fontBlue2 pr">44<span class="f8 c_white analysis-genral-icon b_green2 borderRadius">正常</span></p> </div>