Datenqualität - GAUGE

by Jens Kühn

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div>
    <div id="container" style="width: 210px; height: 60px; margin: 0 auto"></div>
</div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
    
        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBorderWidth: 1,
            plotBackgroundColor: null,
            margin:0
        },
    
        title: {
            text: null
        },
        
        pane: {
            startAngle: -180,
            endAngle: 180,
            background: null,
            center: ['50%', 95],
            size: 140
        },
        
        yAxis: {
            allowDecimals: false,
            min: -100,
            max: 200,
            minorTickPosition: 'outside',
            minorTickLength: 4,
            tickPosition: 'outside',
            lineColor: '#d1d1d1',
            lineWidth: 1,
            tickWidth: 1,
            tickLength: 8,
            tickPixelInterval: 100, 
            gridLineWidth:0,
            labels: {
                enabled: false
            },
            plotBands: [{
                from: -25,
                to: 125,
                color: '#eaeaea',
                innerRadius: '135%',
                outerRadius: '100%'
            },{
                from: 35,
                to: 65,
                color: '#7abf30',
                innerRadius: '135%',
                outerRadius: '100%'
            }]
        },
        credits: {enabled:false},
        plotOptions: {
            gauge: {
                dataLabels: {
                    borderWidth: 0,
                    enabled: true,
                    y: -60
                },
                dial: {
                    radius: '135%',
                    backgroundColor: '#5f5f5f',
                    borderColor: '#d1d1d1',
                    borderWidth: 1,
                    baseWidth: 1,
                    topWidth: 15,
                    baseLength: '90%',
                    rearLength: '-90%'
                },
                pivot: {
                    borderWidth: 0,
                    radius: 0
     ...