hight char钟表图

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>