Highcharts Maßverkörperung mit Häkchen über der Bar

Ich versuche Highchart Solid Spur Diagramm zu verwenden, so etwas zu machen:Highcharts Maßverkörperung mit Häkchen über der Bar

Der nächstgelegene ich bekommen habe ist this jsfiddle:

Highcharts.chart("container", { 
    chart: { 
    type: 'solidgauge' 
    }, 
    tooltip: { 
    enabled: false 
    }, 
    title: null, 
    credits: { 
    enabled: false 
    }, 
    pane: { 
    size: '100%', 
    startAngle: -120, 
    endAngle: 120, 
    background: { 
     innerRadius: '75%', 
     outerRadius: '100%', 
     backgroundColor: '#eeeeee', 
     borderWidth: 0, 
     shape: 'arc' 
    } 
    }, 
    plotOptions: { 
    solidgauge: { 
     innerRadius: '75%', 
     radius: '100%', 
     dataLabels: { 
     enabled: false 
     } 
    } 
    }, 
    yAxis: { 
    labels: { 
     enabled: false 
    },  
    min: 0, 
    max: 100, 
    gridLineColor: 'transparent', 
    lineColor: 'transparent', 
    minorTickLength: 0, 
    tickPositions: [35], 
    tickColor: '#000000', 
    tickPosition: 'inside', 
    tickLength: 60, 
    tickWidth: 4 
    }, 
    series: [{ 
    data: [40] 
    }] 
});

das wie folgt aussieht:

Das Hauptproblem ist mit dem schwarzen Häkchen:

Es hinter der Bar zieht, aber ich will es über die Latte lenken
Es ist nicht über die Latte zentriert ist

Wie kann das mit Highcharts gemacht werden?

Quelle

2017-05-02 Aaron

hinzufügen zIndex in plotOptions und yAchse

fiddle Demo

plotOptions: { 
    solidgauge: { 
     innerRadius: '75%', 
     radius: '100%', 
     dataLabels: { 
     enabled: false, 
     useHTML: true, 
     zIndex: 1000 //added 
     } 
    } 
    }, 
    yAxis: { 
    labels: { 
     enabled: false 
    },  
    min: 0, 
    max: 100, 
    gridLineColor: 'transparent', 
    lineColor: 'transparent', 
    minorTickLength: 0, 
    tickPositions: [35], 
    tickColor: '#000000', 
    tickPosition: 'inside', 
    tickLength: 50, 
    tickWidth: 8, 
    zIndex: 100, //added 
    },

Quelle

2017-05-02 09:45:53

Perfect! Gibt es jetzt eine Möglichkeit, den Tick über der Bar zu zentrieren, wie mein Mock-Up-Bild? – Aaron

Ich habe versucht, aber nicht mit 'tickLength: -50,' oder 'tickPosition: 'outside',' –

Ok. Scheint, dass es nicht gemacht werden kann. Ist es möglich, die [freeform drawing commands] (https://www.highcharts.com/docs/advanced-chart-features/freeform-drawing) zu verwenden, um ein benutzerdefiniertes Häkchen zu zeichnen? Das Problem, das ich habe, ist zu wissen, in welchem Winkel es zu zeichnen ist ... das ist ein großer Teil dessen, was das Diagramm für uns tut. – Aaron

Highcharts Maßverkörperung mit Häkchen über der Bar

Antwort

Verwandte Themen