socialforge/app/views/quality_analysis/_hightchars.html.erb

<script>
    //    sqale_rating
    $(function () {
        $('#container_sqale_rating').highcharts({

                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },
                    title: false,
                    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: 100,
                        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: 5,
                            color: '#55BF3B' // green
                        }, {
                            from: 6,
                            to: 10,
                            color: '#adde18' // yellow
                        }, {
                            from: 11,
                            to: 20,
                            color: '#DDDF0D' // red
                        }, {
                            from: 21,
                            to: 50,
                            color: '#df8538' // yellow
                        }, {
                            from: 51,
                            to: 100,
                            color: '#DF5353' // yellow
                        }]
                    },

//                  delete hightcharts.com
                    credits:{
                        enabled: false
                    },
                    series: [{
                        name: '代码质量',
                        data: [<%= @ha["sqale_rating"].nil? ? 0 : @ha["sqale_rating"] %>]
//                        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);
//                    }
                });
    });


//    function_complexity
    $(function () {
        $('#container_function_complexity').highcharts({

                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },
                    title: false,
                    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: 30,
                        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: 10,
                            color: '#55BF3B' // green
                        }, {
                            from: 11,
                            to: 15,
                            color: '#DDDF0D' // yellow
                        }, {
                            from: 16,
                            to: 30,
                            color: '#DF5353' // red
                        }]
                    },

//                  delete hightcharts.com
                    credits:{
                        enabled: false
                    },
                    series: [{
                        name: '复杂度',
                        data: [<%= @ha["function_complexity"].nil? ? 0 : @ha["function_complexity"] %>]
//                        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);
//                    }
                });
    });

//    duplicated_lines_density
    $(function () {
        $('#container_duplicated_lines_density').highcharts({

                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },
                    title: false,
                    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%'
                        }]
                    },

                    xAxis: {
                        style:{
                            fontSize: '18px'
                        }
                    },

                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 100,
                        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: 30,
                            color: '#55BF3B' // green
                        }, {
                            from: 31,
                            to: 50,
                            color: '#DDDF0D' // red
                        }, {
                            from: 51,
                            to: 100,
                            color: '#DF5353' // yellow
                        }]
                    },

//                  delete hightcharts.com
                    credits:{
                        enabled: false
                    },
                    series: [{
                        name: '重复率',
                        data: [<%= @ha["duplicated_lines_density"].nil? ? 0 : @ha["duplicated_lines_density"] %>]
//                        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);
//                    }
                });
    });

//    comment_lines_density
    $(function () {
        $('#container_comment_lines_density').highcharts({

                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },
                    title: false,
                    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%'
                        }]
                    },

                    xAxis: {
                        title: {
                            text: '复杂度',
                            x: -23, //center设置标题的位置
                            y: 6
                        },
                        style:{
                            fontSize: '18px'
                        }
                    },

                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 100,
                        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: 20,
                            color: '#DDDF0D' // green
                        }, {
                            from: 21,
                            to: 50,
                            color: '#55BF3B' // red
                        }, {
                            from: 51,
                            to: 100,
                            color: '#DF5353' // yellow
                        }]
                    },

//                  delete hightcharts.com
                    credits:{
                        enabled: false
                    },
                    series: [{
                        name: '质量等级',
                        data: [<%= @ha["comment_lines_density"].nil? ? 0 : @ha["comment_lines_density"] %>]
//                        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>